vue-svg-加载器在加载svg时移除一些<g>标记。

Question

我使用vue-svg-loader：https://www.npmjs.com/package/vue-svg-loader?activeTab=readme将外部svg作为Vue组件加载到Vue应用程序中。我修改了加载程序配置，以确保ID不会被删除：

{
  test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    // optional [svgo](https://github.com/svg/svgo) options
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true},
        {cleanupIDs: false}
      ]
    }
  }
}

我试图加载的svg如下所示：

<svg class="external-svg">
   <g class="group-1">
      <path id="a"></path>
      <path id="b"></path>
      <path id="c"></path>
   </g>
   <g class="group-2">
      <path id="d"></path>
   </g>
   <g class="group-3">
      <path id="e"></path>
      <path id="f"></path>
      <path id="g"></path>
   </g>
   <g class="group-4">
      <path id="h"></path>
   </g>
   <g class="group-5">
   </g>
</svg>

使用加载程序，svg成功加载，但是一些标记会被删除。其结果如下：

<svg class="external-svg">
   <g class="group-1">
      <path id="a"></path>
      <path id="b"></path>
      <path id="c"></path>
   </g>
   <path id="d"></path>
   <g class="group-3">
      <path id="e"></path>
      <path id="f"></path>
      <path id="g"></path>
   </g>
   <path id="h"></path>
</svg>

“组-2”、“组-4”和“组-5”被丢弃，但内部的路径是完整的。

有没有其他人遇到过这个问题，或者知道一个很好的解决办法？

谢谢!

Answer 1

我找到了这个问题的解决方案，对于其他可能有类似问题的人，以下是解决方案:将加载程序配置更改为：

{
  test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true},
        {cleanupIDs: false},
        {collapseGroups: false},
        {removeEmptyContainers: false}
      ]
    }
  }
}

加载程序的其他配置可以在这里获得：https://github.com/svg/svgo

Answer 2

对于任何使用vue cli的人：

*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: [
            { cleanupIDs: false },
            { collapseGroups: false },
            { removeEmptyContainers: false },
          ],
        },
      });
  },
};

您可能是为了摆脱清理in或崩溃组而搜索这些信息的。