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

Question

我正在使用vue-svg-loader将外部 svg 作为 Vue 组件加载到我的 Vue 应用程序中：https : //www.npmjs.com/package/vue-svg-loader?activeTab=readme。我修改了加载程序配置以确保 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>

“group-2”、“group-4”和“group-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