如何在svg符號中表示x和y

Question

基於https://css-tricks.com/svg-symbol-good-choice-icons/ 我有一個從svg文件中取得符號的表示形式。原始svgs具有x，y，高度和寬度等屬性。 當將svgs添加到一個svg文件並使它們成爲符號時，我發現將x，y高度和寬度屬性添加到<symbol>是無效的svg。

我解決了高度和寬度問題，將它們添加到<symbol>的style屬性中，因爲支持該屬性。我的問題是，我該如何去添加x和y屬性到<symbol>？

最終文件，僅由一個<svg>和多個SVG的<symbol>

實施例的原始文件：

<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 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> 
    <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屬性，或者在<use>一個transform。

<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，它應該被添加到符號。