如何将带有 translate() 值的路径合并为一个（D3 / SVG）？答案

【问题标题】：How to merge paths with translate() values to a single one (D3 / SVG)?如何将带有 translate() 值的路径合并为一个（D3 / SVG）？
【发布时间】：2019-08-30 03:01:40
【问题描述】：

我有许多路径要加入以获得单一路径。但是，对于每条路径，都应用了 translate()。我发现 this thread 讨论了路径的合并（您可以使用他们在那里使用的the sample 来回答我的问题），但这不适用于路径被翻译的情况。

如何操作d 属性，以便考虑translate() 值并成功合并路径？

【问题讨论】：

标签： d3.js svg

【解决方案1】：

您可能需要更改 d 值，以便不再需要翻译。假设你有这个路径：

svg{border:1px solid}

<svg viewBox="0 0 200 100">
<path transform="translate(50,20)" d="M25, 60 C100, 0 25, -10 25, 15 C25, -10 -50, 0 25, 60 Z" />
</svg>

在这种情况下，您需要先将命令更改为小写命令（相对）。

 d="M25,60c75,-60,0,-70,0,-45c0,-25,-75,-15,0,45z"

你可以使用这个工具：Convert SVG path to all-relative or all-absolute

为了合并翻译，您可以通过添加翻译 ( translate(50,20) ) 来更改第一个命令 M 的值： d="M75,80c75,-60,0 ,-70,0,-45c0,-25,-75,-15,0,45z"

25+50 = 75; 60+20 = 80

这是您不再需要翻译的结果路径：

svg{border:1px solid}

<svg viewBox="0 0 200 100">
<path d="M75, 80 C100, 0 25, -10 25, 15 C25, -10 -50, 0 25, 60 Z" />
</svg>

现在您应该可以应用此答案中解释的方法：Merging multiple paths into one D3(SVG)

【讨论】：