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：緊湊的方式來創建略有不同的元素？

回答

相關問題