Question

我正在使用Vue.js，并尝试放置一些在Illustrator中为Webapp创建的SVG图标。我用Webpacks“ require”加载了图标。无法通过其源（img标签的src属性）访问svg，因此我们将其插入vue，如下所示：

<div class="section-icon" v-html="getIconForEvent(event)"></div>

这会在正确的位置显示正确的图标，但是我在使用此方法时遇到了一些问题。

所有SVG均在svg中带有样式标签。因此，最后一个SVG会覆盖所有以前的SVG的样式，因为它们在某种程度上都具有相同的类。在Chrome Devtools中，这看起来像 this。

我该怎么办才能不让SVG样式覆盖彼此的类？我没有自己放置样式标签，这些只是SVG本身的样式。谢谢！

Answer 1

除了修改每个SVG中的类名称以免它们冲突之外，您无能为力。

您似乎正在使用Illustrator生成这些SVG。要解决此问题，请确保在保存SVG时告知Illustrator，不要不使用<style>元素进行元素样式设置。

保存时，使用File > Save As > SVG，然后单击“更多选项”并更改“ CSS属性”设置。如果将其设置为“样式元素”，请将其更改为其他选项之一。如果这样做，它将不会使用类，并且您的SVG也不会彼此冲突。

要修复您当前的SVG，您应该能够将其加载，然后使用上述方法重新保存它们。

Answer 2

尝试使用孩子通过CSS定位它们：

.cls-3:first-child {
   fill:yellow;
}
.cls-3:nth-child(2) {
   fill:red;
}

...

.cls-3:last-child {
   fill:blue;
}

填充所需的颜色以查看其是否有效。如果那不能覆盖它，您可能需要使用！important，尽管这不是最佳实践，而是最坏的情况。