3

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

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

谢谢。

4

3 回答 3

2

您的答案应该像您提供的那样有效。您可以提供更具体的问题示例，以唤起更好的解决方案。

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

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

于 2009-11-10T02:42:53.177 回答
0

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

translate(-X, 0)

和

translate(X, 0)

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

于 2009-11-21T11:19:08.623 回答
0

我会给你一些完全未经测试的代码，而无需查看 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);

于 2009-11-22T02:06:12.287 回答