如何多次使用Snap.svg代码? [英] How to use Snap.svg code multiple times?
本文介绍了如何多次使用Snap.svg代码?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
此演示.
我想使用Snap.svg制作图标,所以我希望最终用户重复HTML以获取多个图标.
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});
推荐答案
您需要遍历每个.box
并在每个元素上实例化Snap,这是一个示例:
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"});
});
此处的工作示例:
http://codepen.io/anon/pen/XKXpEY
这篇关于如何多次使用Snap.svg代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文