如何多次使用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 并在每个元素上实例化 Snap，这是一个示例：

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

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

How to use Snap.svg code multiple times?

javascript

svg

snap.svg