How to use Snap.svg code multiple times?

问题

this demo .

I want to make Icons using Snap.svg, so i want end user to repeating HTML to getting multiple icons.

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});

回答1:

You need to iterate through each .box and instantiate Snap on each element, this is an example:

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

Working example here:

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

来源：https://stackoverflow.com/questions/37731422/how-to-use-snap-svg-code-multiple-times