SVG覆盖了彼此的CSS样式

Question

我正在使用Vue.js，并尝试将我在Illustrator中制作的一些SVG图标放置在我的Web应用程序中。我使用Webpack的"require"加载了这些图标。无法通过它们的源（img标签的src属性）访问svg，因此我们可以像这样使用vue插入它们：

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

这样可以在正确的位置显示正确的图标，但我在这种方法中遇到了一些问题。

所有SVG都带有一个内部style标签进行样式设置。因此，最后一个SVG会覆盖所有先前SVG的样式，因为它们似乎都有相同的类。在Chrome开发工具中，看起来像是这样。

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

- Paul

Answer 1

除了修改每个SVG中的类名以避免冲突之外，您无法做任何其他事情。

看起来您在使用Illustrator来制作这些SVG。为了解决问题，请确保告诉Illustrator在保存SVG时不要使用<style>元素进行元素样式设置。

保存时，请使用文件 > 另存为 > SVG，然后点击“更多选项”并更改“CSS属性”设置。如果它设置为“样式元素”，请将其更改为其他选项之一。如果这样做，它将不使用类名，您的SVG将不会互相冲突。

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

- Paul LeBeau

Answer 2

尝试使用子元素的 CSS 来定位它们：

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

...

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

填写您需要的颜色，以查看是否有效。如果这样不起作用，您可能需要使用!important，尽管这不是最佳实践，而是最坏情况。

- Torjescu Sergiu