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

Question

我正在使用 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">

'''

Answer 1

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

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

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

Answer 2

我发现 vue-svg-loader 文档非常薄，主要是因为它的所有配置都是通过 svgo library. There are some clues in this FAQ 完成的，它向您展示了如何在 webpack 配置中自定义 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"],
            }
          ],
        },
      });
  },
};

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

How to inherit svg's css properties using vue svg loader

svg

loader

vue.js