如何使用Vue SVG加载程序继承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文件都使用相同的类名（st0，st1等）。他们互相压制。您需要：

1. 手动重命名每个文件中的类，以便它们使用不同的名称，或者

2. 该文件看起来像来自Illustrator。假设它们都完成了，然后将SVG加载回Illustrator，然后重新导出它们。这次更改了AI用于设置元素样式的方法。我现在没有方便使用的AI，但是可能会有三个选择（我不记得确切的名字了）：

   • 内部CSS -上面的文件正在使用什么
   • 样式属性-使用style="..."属性
   • 属性-使用fill="#ff0000"
   之类的属性

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

Answer 2

我发现vue-svg-loader文档非常薄，主要是因为其所有配置都是通过svgo库完成的。 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"],
            }
          ],
        },
      });
  },
};