Как представить x и y в символе svg

Question

Основано на https://css-tricks.com/svg-symbol-good-choice-icons/ У меня есть представление символов, взятых из svg-файлов. Оригинальные svgs имеют такие свойства, как x, y, высота и ширина. При добавлении svgs в один файл svg и создании их символов я обнаружил, что добавление атрибутов высоты и ширины x, y к <symbol> недействительно svg.

Я решил проблему по высоте и ширине, добавив их в атрибут стиля <symbol>, так как он поддерживается. Мой вопрос: как я могу добавить атрибуты x и y в <symbol>?

Конечный файл, состоит только из одного <svg> и множественного SVG <symbol>

Пример исходного файла:

<svg width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    Sorry, your browser does not support inline SVG. 
</svg> 

файл после изменения его символа:

<svg style="display:none;"> 
<symbol id="circle" width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    Sorry, your browser does not support inline SVG. 
</symbol> 
</svg> 

В приведенном выше описании ширина и высота не являются допустимыми атрибутами для символа.

Символ используется следующим образом:

<svg> 
    <use xlink:href="#circle" /> 
</svg> 

Тем не менее, в приведенном выше, он не расширяется, чтобы принять ширину и высоту. Я также попытался вложенности в SVG внутри символа, как это и он также не уважает высота и ширина:

<svg style="display:none;"> 
    <symbol id="circle"> 
<svg width="100" height="100"> 
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
     Sorry, your browser does not support inline SVG. 
</svg> 
    </symbol> 
    </svg> 

Answer 1

<symbol> элемент не имеет x, y, width или height атрибуты.

Ваш исходный файл:

<svg width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    Sorry, your browser does not support inline SVG. 
</svg> 

должны быть преобразованы в:

<svg style="display:none;"> 
    <symbol id="circle"> 
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    </symbol> 
</svg> 

А затем ссылаться на него с <use> следующим образом. Если исходный SVG имел значения width и height, то они должны идти в <use>.

<svg> 
    <use xlink:href="#circle" width="200" height="100"/> 
</svg> 

Если вы хотите поместить символ, используйте x и y атрибуты, или transform на <use>.

<svg> 
    <use xlink:href="#circle" width="200" height="100" x="300" y="50"/> 
</svg> 

<svg> 
    <use xlink:href="#circle" width="200" height="100" transform="translate(300,50)"/> 
</svg> 

Обратите внимание, что <symbol> элементы сделать поддержку viewBox, поэтому если оригинал SVG имеет viewBox, он должен быть добавлен к символу.