获取具有多个路径的 svg 文件的单个路径值答案

【问题标题】：Get a single path value for svg file having multiple paths获取具有多个路径的 svg 文件的单个路径值
【发布时间】：2021-07-26 23:14:54
【问题描述】：

我正在创建一个图标组件，我将我的图标存储为 svg 坐标。

例如：垃圾：'M192 1024h640l64-704h-768zM640 128v-128h-256v128h-320v192l64-64h768l64 64v-192h-320zM576 128h-128v-64h128v64z'

但某些 svg 图标文件有多个路径（如下所示）。但我打算只有一个路径值来存储我的图标坐标。谁能告诉我我该怎么做才能解决这个问题？

<svg id="add-contact-communication-workflow-system-filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g id="Group_822" data-name="Group 822" transform="translate(-938.662 -1091.778)">
    <g id="Group_821" data-name="Group 821">
      <path id="Path_821" data-name="Path 821" d="M948.432,1103.947a4.063,4.063,0,1,0-4.063-4.062A4.067,4.067,0,0,0,948.432,1103.947Z"/>
      <path id="Path_822" data-name="Path 822" d="M948.432,1104.844a7.9,7.9,0,0,0-7.89,7.89,1.539,1.539,0,0,0,1.539,1.54h12.7a1.54,1.54,0,0,0,1.54-1.54A7.9,7.9,0,0,0,948.432,1104.844Z"/>
    </g>
    <path id="Path_823" data-name="Path 823" d="M960.033,1095.873h-1.84v-1.84a.75.75,0,0,0-1.5,0v1.84h-1.84a.75.75,0,0,0,0,1.5h1.84v1.84a.75.75,0,0,0,1.5,0v-1.84h1.84a.75.75,0,0,0,0-1.5Z"/>
  </g>
  <rect id="Rectangle_503" data-name="Rectangle 503" width="24" height="24" fill="none"/>
</svg>

这里

【问题讨论】：

标签： javascript css reactjs svg designer

【解决方案1】：

只要路径具有相同的样式，并且它们的transform 与其他路径都没有不同，您可以简单地将路径附加到一个中。

M948.432,1103.947a4.063,4.063,0,1,0-4.063-4.062A4.067,4.067,0,0,0,948.432,1103.947Z M948.432,1104.844a7.9,7.9,0,0,0-7.89,7.89,1.539,1.539,0,0,0,1.539,1.54h12.7a1.54,1.54,0,0,0,1.54-1.54A7.9,7.9,0,0,0,948.432,1104.844Z M960.033,1095.873h-1.84v-1.84a.75.75,0,0,0-1.5,0v1.84h-1.84a.75.75,0,0,0,0,1.5h1.84v1.84a.75.75,0,0,0,1.5,0v-1.84h1.84a.75.75,0,0,0,0-1.5Z

请注意，在您的示例 SVG 中，这三个路径位于具有 transform 的组内。如果您希望组件显示在正确的位置，您可能需要在组件中考虑到这一点。

【讨论】：

【解决方案2】：

您必须首先摆脱变换和组。只有这样才能做到。您可以尝试“https://www.npmjs.com/package/svgo”模块来优化 svg 并将它们转换为单个路径。但是你必须再次摆脱组和转换。

【讨论】：