如何多次使用Snap.svg代碼？

Question

這個demo。

我想使用Snap.svg製作圖標，所以我希望最終用戶重複HTML以獲取多個圖標。

HTML：

<svg class="box"></svg> 
<svg class="box"></svg> <!-- not work --> 
<svg class="box"></svg> <!-- not work --> 
<svg class="box"></svg> <!-- not work --> 

JS：

var box = Snap(".box"); 
box.rect(0,0,100,100).attr({fill:f00}); 

Answer 1

你需要通過每個.box迭代和每個元素實例化快，這是一個例子：

var boxes = [].slice.call(document.querySelectorAll(".box")); 
boxes.forEach(function(box){ 
    var box = Snap(box); 
    box.rect(0,0,100,100).attr({fill:"#f00"}); 
}); 

工作示例這裏：

http://codepen.io/anon/pen/XKXpEY