SVG 相互覆盖 CSS 样式

Posted 2023-02-22

【中文标题】SVG 相互覆盖 CSS 样式

【英文标题】：SVGs override each others CSS-style

【发布时间】：2019-01-14 11:05:12

【问题描述】：

我正在使用 Vue.js 并尝试放置一些我在 Illustrator 中为我的 Web 应用程序制作的 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 本身的样式。谢谢！

【参考方案1】：

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

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

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

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

【参考方案2】：

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

.cls-3:first-child 
   fill:yellow;

.cls-3:nth-child(2) 
   fill:red;

...

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

填写你需要的颜色，看看它是否有效。如果这没有覆盖它，您可能需要使用 !important，尽管这不是最佳做法，而是最坏的情况。