javascript - vue-svg-loader 在加载 SVG 时删除一些 标签

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