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>

＆＃34; group-2＆＃34;，＆＃34; group-4＆＃34;和＆＃34;组-5＆＃34;掉下来，但里面的路径完好无损。

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

谢谢！

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 },
          ],
        },
      });
  },
};

您可能正在搜索此内容，以摆脱清理ID或折叠组的麻烦

vue-svg-loader在加载SVG时删除了一些<g>标记

2 个答案: