我在SVG中定义了一个路径。我想制作两个路径副本并将它们翻译成一个平行于原始的一侧，另一个平行于另一侧。我们的想法是最终得到3条路径，它们彼此平行且不重叠。
我尝试过两种路径的简单翻译，例如transform =“translate（10,10）”和transform =“translate（-10，-10）”，但是在某些路径中它们最终相互交叉，这是不是我想要的。
感谢。
答案 0 :(得分：2)
你提供的答案应该有所帮助。您可以提供更具体的问题示例来引发更好的解决方案。
您提供的命令将以二维方式移动项目，而不仅仅是一个。
另外，请记住，SVG使用左上角为0,0，向右/向下为正。还要检查以确保您没有被单位绊倒。
答案 1 :(得分：0)
如果您的原始路径有一个X，Y的边界框，那么确保复制的不重叠的最简单方法是翻译+ X和-X，所以：
translate(-X, 0)
和
translate(X, 0)
您计算了X的值并在translate参数中设置它。
答案 2 :(得分：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);