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

我有一个在SVG中定义的路径。我想制作两份路径并翻译它们，以便一边与原文平行，另一边与另一边平行。这个想法是最终有3条路径，全部相互平行并且不重叠。如何转换svg中的路径，使其平行于原始位置？

我试过两种路径的简单翻译，例如transform =“translate（10,10）”和transform =“translate（-10，-10）”，但是在某些路径中它们最终会互相交叉不是我想要的。

谢谢。

来源

2009-11-10 gjrwebber

你能带我们去SVG文件，所以我们可以看看你的问题？ – Boldewyn 2009-11-12 14:32:38

你的答案应该有点像你提供的那样。您可以提供更具体的问题实例来唤起更好的解决方案。

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

另外，请记住，SVG使用左上角的点为0,0，而右/下是正的。同时检查以确保你没有被单位绊倒。

来源

2009-11-10 02:42:53

如果原始路径具有X，Y的边框，然后以确保最简单的方法是复制不重叠是+ X和-X翻译，所以：

translate(-X, 0)

和

translate(X, 0)

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

来源

2009-11-21 11:19:08

我可以看到你在尝试什么，但是使用这种解决方案，只有原件垂直时，两条线才会平行。如果原始线条是水平的，则会有3条线条相互重叠。 – gjrwebber 2009-11-23 05:25:33

您在说明中使用了“路径”和“行”。如果您更准确地描述您的要求，我认为这会有所帮助。无论角度如何，在克隆和翻译时都会产生平行线。类似地，路径的行在克隆路径中总是具有平行等价物。退化情况（带有单条垂直线或水平线）应该被困住。但是如果你添加一个小填充框（比如说P = 10）到你的边界框，那么命令平移（X + P，0）和平移（-X-P，0）[X是边界框的宽度]永远不会重叠 – 2009-11-23 22:42:27

我会给你一些完全未经测试的代码，而不是查看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-22 02:06:12 codedread

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

回答

相关问题