如何使用 vue svg loader 继承 svg 的 css 属性答案

【问题标题】：How to inherit svg's css properties using vue svg loader如何使用 vue svg loader 继承 svg 的 css 属性
【发布时间】：2020-01-03 23:45:14
【问题描述】：

我正在使用 vue-svg-loader 将我的 svg 文件用作 Vue 项目中的一个组件。当我渲染这些 svg 时，我丢失了 svg 文件中的默认 css 属性。我可以在渲染 svg 文件的组件中添加这些 css 属性，但这违反了可重用组件的想法，因为每个 svg 文件都有自己的属性。有没有办法继承他们的css？

'''

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:none;}
    .st2{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:10;}
    .st3{font-family:'ArialMT';}
    .st4{font-size:32px;}
</style>
<font horiz-adv-x="2048">

'''

【问题讨论】：

标签： vue.js svg loader

【解决方案1】：

可能发生的情况是所有 SVG 文件都使用相同的类名（st0、st1 等）。他们正在互相超越。您需要：

手动重命名每个文件中的类，使它们使用不同的名称，或者
该文件看起来像是来自 Illustrator。假设他们都这样做了，然后将 SVG 加载回 Illustrator，然后重新导出它们。这次更改 AI 用于设置元素样式的方法。我现在手头没有 AI，但可能会有三个选项（我不记得它们叫什么了）：
- 内部 CSS - 上面的文件使用的是什么
- 样式属性 - 使用 style="..." 属性
- 属性 - 使用像fill="#ff0000" 这样的属性

如果您需要在页面中使用 CSS 设置 SVG 样式，您可能需要使用最后一个选项。那是因为style 属性的优先级高于 CSS，所以你需要使用 CSS !important 标志，一般不推荐。

【讨论】：

现在，当我出于某种原因渲染此 SVG 时，它不会显示路径的 ID。内联样式会隐藏它们吗？
您的意思是生成的 SVG 文件不包含id 属性（已从图层名称转换而来）？
不，所以 ID 在 SVG 文件中，但是当我在浏览器中渲染它时，ID 不显示
我不确定您所说的“显示”是什么意思。 id 属性不会显示在屏幕上。也许最好为此提出一个新问题。包括一个示例 SVG 并描述您期望看到的内容。也许有一个模型截图。

【解决方案2】：

我发现vue-svg-loader 文档非常薄，主要是因为它的所有配置都是通过svgo 库完成的。 this FAQ 中有一些线索，告诉你如何在 webpack config 中自定义 svgo 配置。

所以也许你想在你的 vue.config.js 文件中添加这样的内容：

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [
            addClassesToSVGElement: {
              classNames: ["foo", "bar"],
            }
          ],
        },
      });
  },
};

【讨论】：