css - SVG 相互覆盖 CSS 样式

Question

我正在使用 Vue.js 并尝试放置一些我在 Illustrator 中为我的 Web 应用程序制作的 SVG 图标。我用 Webpacks“require”加载了图标。无法使用它们的源(img 标签的 src 属性)访问 svg，所以我们像这样用 vue 插入它们:

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

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

所有 SVG 都使用 svg 中的 style-tag 进行样式化。所以最后一个 SVG 覆盖了所有以前的 SVG 的样式，因为它们不知何故都具有相同的类。在 Chrome Devtools 中，这看起来像 this .

我该怎么做才能不让 SVG 的样式覆盖彼此的类？我自己并没有把样式标签放在那里，那些只是 SVG 本身的样式。谢谢!

Answer 1

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

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

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

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