如何转换 svg 中的路径，使其与其原始位置平行？答案

【问题标题】：How to transform a path in svg so that it is parallel to its original location?如何转换 svg 中的路径，使其与其原始位置平行？
【发布时间】：2009-11-10 01:35:18
【问题描述】：

我在 SVG 中定义了一个路径。我想制作路径的两个副本并翻译它们，使一个与原始路径平行，另一侧与原始路径平行。这个想法是最终得到 3 条路径，它们彼此平行且不重叠。

我已经尝试过简单的翻译，例如两个路径的 transform="translate(10,10)" 和 transform="translate(-10,-10)"，但在某些路径中它们最终会相互交叉，即不是我想要的。

谢谢。

【问题讨论】：

您能否将我们指向 SVG 文件，以便我们查看您的问题？

标签： svg translation coordinates coordinate-systems

【解决方案1】：

您的答案应该与您提供的一样有效。您可以提供更具体的问题示例，以寻求更好的解决方案。

您提供的命令将在二维中移动项目，而不仅仅是一维。

另外，请记住，SVG 使用左上角作为 0,0，而右/下是正数。还要检查以确保您没有被单位绊倒。

【讨论】：

【解决方案2】：

如果你的原始路径有一个 X,Y 的边界框，那么确保复制的不重叠的最简单方法是通过 +X 和 -X 进行平移，所以：

translate(-X, 0)

和

translate(X, 0)

您计算了 X 的值并将其设置在 translate 参数中。

【讨论】：

我可以看到您正在尝试什么，但是使用此解决方案，只有当原件是垂直的时，两条线才会平行。如果原始线是水平的，您将在彼此的顶部绘制 3 条线。
您在描述中同时使用了“路径”和“行”。我认为如果您更准确地描述您的要求会有所帮助。任何线在克隆和平移时都会产生平行线，无论角度如何。类似地，路径的线在克隆路径中总是具有平行的等价物。应该捕获退化的情况（具有单个垂直或水平线）。但是，如果您在边界框中添加一个小填充框（例如 P = 10），那么命令 translate(X+P, 0) 和 translate (-X-P, 0) [X 是边界框的宽度] 永远不会重叠

【解决方案3】：

我将为您提供一些完全未经测试的代码，而无需查看 SVG DOM 规范。然后，您可以对其进行测试和调整以使其正常工作。

首先，获取一个元素的边界框：

var box = mypath.getBBox();

然后克隆路径两次（或制作元素）：

var rightCopy = mypath.cloneNode(true); var bottomCopy = mypath.cloneNode(true);

然后对每个副本进行变换：

rightCopy.setAttribute("transform", "translate(" + box.width + ",0) " + rightCopy.getAttribute("transform"));

bottomCopy.setAttribute("transform", "translate(0," + box.height + ") " + bottomCopy.getAttribute("transform"));

它看起来很乱的原因是原始路径上可能已经有转换。

然后将这些节点添加回 DOM：

mypath.parentNode.insertBefore(rightCopy, mypath);

mypath.parentNode.insertBefore(bottomCopy, mypath);

【讨论】：