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

我创建几个元件，其几乎是相同的路径，与坐标的长列表。有没有一种紧凑的方式来创建一个元素，并且制作一个稍微不同的副本？SVG：紧凑的方式来创建略有不同的元素？

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

另一个明显的解决方案是只与第一元件复制到一个变种，以及设置在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);

任何想法？

谢谢 -

铝

来源

2011-06-08 EML

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

等尽可能多的元素，因为你需要。

来源

2011-06-08 23:45:17 AsherMaximum

请注意，如果您刚完成'var firstElement = templateElement'，'firstElement'和'templateElement'会引用同一个节点。我猜这就是为什么你的第二个解决方案不起作用 – AsherMaximum 2011-06-08 23:47:21

*＆£*！我无法在“添加评论”框外回复您，因为它被视为答案，而且我的声誉低于100，所以我无法在6小时内回复。如何非常肛门。无论如何，我认为，我正在做的就是你的建议。它适用于Chrome，但不是FF。明天我会发布我的代码。这是2AM现在... :( – EML 2011-06-09 01:07:51

更新：这种方法适用于Chrome和IE9，但在Opera或FF4不起作用。 – EML 2011-06-09 09:05:28

AAAH ..在我的部分错字愚蠢的;抱歉。我上面发布的代码是正确的，但我没有显示下面的其他克隆。在最后一个，我把var obj10 = obj.cloneNode()，留下了'真实'。它看起来像FF4和Opera得到了正确的答案，Chrome和IE9复制了所有的属性。

来源

2011-06-09 14:55:37 EML

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

回答

相关问题