SVG заполняет внешний файл

Question

Действительно основной вопрос SVG. Я прочитал SVG sprite in external file , и он отлично работает для меня, чтобы добавить графику svg, но я не могу заставить его работать с defs. Первый файл «defs.svg»:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <defs id='patternDefs'> 
      <pattern id="pattern1" 
      x="2" y="2" 
      width="5" height="5" 
      patternUnits="userSpaceOnUse" > 
      <circle cx="2" cy="2" r="2" class="blue" /> 
     </pattern> 
    </defs> 
</svg> 

, а затем ГСВ в отдельном файле:

<svg> 
    <use xlink:href="defs.svg#patternDefs"></use> 
     <circle cx="15" cy="15" r="50" stroke-width="2" stroke="red" fill="url(#pattern1)" /> 
</svg> 

Я ищу, чтобы получить fill="url(#pattern1)" часть для работы, так как это то, что ссылки на def во внешнем файле.

Извините, если вы считаете, что это ответили в другом месте, но я прочитал массу вещей и подумал, что если бы я смог получить версию спрайта, то почему бы не использовать версию defs. (Я очень новой для svg)

Answer 1

xlink:href="defs.svg#patternDefs" должен быть xlink:href="defs.svg#pattern1"

На вершине этого <use> должна указывать на то, чтобы быть оказаны, а не шаблон. Если вы хотите заполнить круг рисунком, просто установите заливку круга в шаблон. Например.

<svg> 
    <circle cx="80" cy="80" r="50" stroke-width="2" stroke="red" fill="url(defs.svg#pattern1)" /> 
</svg> 

Обратите внимание, что внешние заливки не поддерживаются широко, хотя они действительно работают в Firefox, например.