Javascript vue svg加载程序删除了一些<；g>；加载SVG时进行标记

我正在使用Vue svg加载器将外部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组”被删除，但其中的路径完好无损

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

---

谢谢

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

{
  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}
      ]
    }
  }
}

---

加载程序的其他配置在此处可用：

我找到了解决此问题的方法，对于可能有类似问题的任何其他人，以下是解决方法： 将加载程序配置更改为以下内容：

{
  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}
      ]
    }
  }
}

---

此处提供了加载程序的其他配置：

适用于使用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 },
          ],
        },
      });
  },
};

---

您搜索此选项可能是为了避免为使用vue cli的任何人清理ID或折叠组

：

*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或折叠组

看起来加载程序正在尝试通过删除它认为不必要的组标记（即只有一个子元素的组）进行优化。当然，这确实删除了类，而且还可能影响针对组的样式。您可能想向MaintainerHanks@StephenThomas提交一个问题！我确实提出了一个问题，也得到了快速的回复。我已经在下面发布了解决方案。看起来加载程序正在尝试通过删除它认为不必要的组标记（即只有一个子元素的组）来进行优化。当然，这确实删除了类，而且还可能影响针对组的样式。您可能想向MaintainerHanks@StephenThomas提交一个问题！我确实提出了一个问题，也得到了快速的回复。我已经在下面发布了解决方案。