如何将SVG路径转换为与其原始位置平行？

Question

我有一个在SVG中定义的路径。我想要复制这个路径并将其平移，使得其中一个路径与原始路径平行，另一个路径与原始路径相对平行。我的目标是得到三条互相平行且不重叠的路径。

我尝试了一些简单的变换操作，例如给两条路径添加 transform="translate(10,10)" 和 transform="translate(-10,-10)"，但是有些路径最终会交叉，这不是我想要的结果。

谢谢。

- gjrwebber

---

你能指出SVG文件的位置吗，这样大家就可以查看你的问题了吗？ - Boldewyn

Answer 1

你的答案在一定程度上是正确的。为了引出更好的解决方案，你可以提供更具体的问题示例。

你提供的命令会在两个维度上移动物品，而不仅仅是一个。

此外，请记住SVG使用左上角为0,0点，向右/向下为正。还要检查确保你没有被单位所困扰。

- Paul McMillan

Answer 2

如果您的原始路径具有边界框 X，Y，则确保复制不重叠的最简单方法是通过 +X 和 -X 进行平移，因此：

translate(-X, 0)

并且

translate(X, 0)

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

- peter.murray.rust

---

我明白你的意图，但是使用这个解决方案时，只有当原始线条是垂直的时候，这两条线才会平行。如果原始线条是水平的，你将会得到三条线重叠在一起。 - gjrwebber

您的描述中同时使用了“路径”和“线条”。如果您能更加精确地描述您的要求会更加有帮助。 任意一条线被克隆并平移后都会成为平行线，无论其角度如何。同样，路径中的线条在克隆后也总有一个相应的平行替代品。 需要注意的是，当只有一条垂直或水平线时，这种情况应该被排除。但如果您给包围框添加一个小的填充区域（比如P=10），则命令translate(X+P, 0) 和 translate(-X-P, 0) [其中X是包围框的宽度] 就永远不会重叠。 - peter.murray.rust

Answer 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);

- codedread