Question

我正在创建几个几乎相同路径的元素，以及一长串坐标。是否有一种紧凑的方式来创建一个元素，并制作一个稍微不同的副本？

元素由'createElementNS'创建。显而易见的（我认为）答案是将第一个元素克隆到一个新元素中，并且只设置第二个元素中已更改的属性。这适用于Chrome和IE9，但不适用于FF4或Opera。

另一个明显的解决方案是将第一个元素复制到var中，并在var中设置更改的属性。这在Chrome或FF中不起作用。

我可以通过createElementNS创建一个新元素，并从旧元素中复制所有属性，但我不知道循环所有属性的方法，这会有所帮助。

这是几乎正在运行的克隆代码的一个例子：


obj = svgDocument.createElementNS(svgns, "path");
obj.setAttributeNS(null, "id", "pbox1");
...lots more attributes set
svgDocument.documentElement.appendChild(obj);

// now try to clone and copy:
var obj2 = obj.cloneNode(true);
obj2.setAttributeNS(null, "id", "pbox2");
...change a few obj2 attributes
svgDocument.documentElement.appendChild(obj2);

有什么想法吗？

谢谢 -

的Al

Answer 1

var templateElement =  document.createElement(// create template element);

var firstElement = templateElement.cloneNode(true) // the true make sure it clones all child nodes
var firstElement.setAttribute()// change what you need

以及您需要的任意数量的元素。

Answer 2

aaah ..我的愚蠢错字;抱歉。我上面发布的代码是正确的，但我没有显示下面的其他克隆。在最后一个，我放入var obj10 = obj.cloneNode()，省略'真'。看起来FF4和Opera得到了正确答案，Chrome和IE9无论如何都复制了所有属性。

SVG：紧凑的方式来创建略有不同的元素？

2 个答案: