Wie man Snap.svg Code mehrfach benutzt?

Question

diese demo.

Ich möchte Icons mit Snap.svg machen, also möchte ich Endbenutzer HTML zu wiederholen, um mehrere Symbole zu erhalten.

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

Sie müssen durch jede .box iterieren und Verschluss auf jedem Element instanziiert, dies ist ein Beispiel:

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

Arbeitsbeispiel hier:

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