html - 如果我要在 web 应用程序中使用更多的 SVG 图标，我不能直接为每个图标使用下面提到的代码

Question

如果我将在 Web 应用程序中使用更多数量的 SVG Sprite 图标，则很难为每个图标使用下面提到的代码。有没有其他简单的方法可以在 Web 应用程序上实现更多图标？

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
         height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
    <g id="bg">
    </g>
    <g id="ui">
        <g>
            <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3         "/>
            <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 
                3.8,26 4.6,21.3 1.1,18 6,17.3       "/>
        </g>
    </g>
    <g id="pop_ups">
    </g>
    </svg>

是否有任何其他不同的方法可以在网络应用程序上使用更多数量的图标？

Answer 1

一种方法是给你的明星一个id并使用 use 重复使用它元素。事实上，第一个 SVG，您保存代码的那个可能是隐藏的。

svg{border:1px solid;}

<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3"/>
</svg>
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">  
     <use fill="none" stroke="#000000" xlink:href="#star" y="5"/>
</svg>

在这种情况下，您可以提供 <use>元安x和/或 y属性。这使您可以将星星移动到任何需要的地方。

另一个选项 id 将您的图标代码放在 <symbol> 中并像以前一样重新使用它，并带有 <symbol> 的奖励可以有一个 viewBox属性，这使您可以拥有不同的尺寸。为此，您可以提供您的 <use>元安width和/或 height属性。

svg{border:1px solid;}

<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
    <use fill="none" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">  
    <use fill="none" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>

请注意，最好让主要路径(在本例中为 #star)没有填充和描边。这样你就可以给你的 <use>元素描边和填充，这样你就可以得到不同填充或描边的星星

<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
    <use fill="skyBlue" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">  
    <use fill="gold" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>