SVG 相互覆盖 CSS 样式

Question

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

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

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

SVG 都使用 svgs 中的样式标签进行样式设置。因此，最后一个 SVG 会覆盖之前所有 SVG 的样式，因为它们在某种程度上都具有相同的类。在 Chrome Devtools 中，这看起来像 这个。

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

Answer 1

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

看起来您正在使用 Illustrator 来生成这些 SVG。 要解决此问题，请确保在保存 SVG 时告诉 Illustrator 不要使用

<style>

元素进行元素样式设置。

保存时，使用

File > Save As > SVG

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

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

Answer 2

如果这适用于您的实现，您可以将 SVG 渲染为 CSS 背景图像而不是内联元素。这将防止他们的风格相互干扰。

<template>
  <div class="section-icon" :style="iconStyle"></div>
</template>

<script setup>
const svgContent = ... // Your way of obtaining the SVG icon content

const iconStyle = computed(() => {
  return svgContent.value
    ? {
        backgroundImage: `url('data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent.value)}')`,
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
      }
    : {};
});
</script>

Answer 3

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

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

...

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

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