SVG互相覆盖CSS样式

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中，看起来像 这样。

我该怎么做才能不让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，尽管这不是最佳实践，而是最坏的情况。