尝试使用svg精灵

无法在我的模板上使用SVG精灵。我在谷歌上搜索了很多次，但发现解决方案对我不起作用

当我使用：

<svg>
   <use xlink:href="icons.svg#icon"></use>
</svg>

浏览器显示“阴影根已关闭”

当我尝试使用SVG作为内联时，SVG标记中的g标记会远离父SVG标记

如何使我的SVG文件有用

---

我的svg文件>

从带有图标的文件中，首先制作一个图标精灵

• 为此，请使用
  标记包装每个图标的代码 组标记的名称

• 然后另存为独立的

  icons.svg

  文件，并将其添加到

  index.html

• 将此文件添加到应用程序的

  HTML

您的浏览器不支持SVG

或者，如果带有图标的文件位于其他文件夹中，请指定完整路径

您的浏览器不支持SVG

已转换的精灵图标文件示例：

.st0{fill:#EA3B58；}
.st1{fill:#FFFFFF；}
.st2{fill:#4C76BE；}
.st3{填充规则：偶数；剪辑规则：偶数；填充：#FFFFFF；}
.st4{fill:#F99400；}
.st5{fill:#4C75A3；}
.st6{fill:#00C7FF；}
.st7{fill:#FC5345；}
.st8{fill:#71C644；}

在svg文件中，您需要使用

id

，而不仅仅是CLASE。然后您可以使用带有

的图标，其中

icon\u id

是您需要使用的图标的

id

。我这样做了，也包装到了

符号

标签上，给出了一个

id

但不起作用。请打开。这是一个简单的例子，我不理解我的问题。这是属性xlink:href，我作为值传递了错误的路径。你的例子帮了我。谢谢你抽出时间！但是，如何使

g

标记填充所有

svg

标记，或者反之亦然？