Question

我有一个这样的清单：

<ul class="legend-list>
  <li id="icon-1"></li>
  <li id="icon-2"></li>
  <li id="icon-3"></li>
  <li id="icon-4"></li>
</ul>

我正在使用Snap和带有JSON数据的$ .each（）创建一堆像这样的圈子：

<svg>
  <circle cx="100" cy="100"></circle>
  <circle cx="120" cy="100"></circle>
  <circle cx="140" cy="100"></circle>
  <circle cx="160" cy="100"></circle>
  <circle cx="180" cy="100"></circle>
</svg>

我能够确定Snap为我能抓住的所有这些添加了一个id。它是随意的，但是让我们说模式是＆＃34; circ-1＆＃34;，＆＃34; circ-2＆＃34;，＆＃34; circ-3＆＃34;等等等

我想知道的是我如何抓住每个圈子并将它们附加到每个列表项目中。我知道它可能就像某种循环一样简单，但是我在考虑它时失去了我的弹珠。

之前有没有人这样做过或有任何建议吗？

Answer 1

在此您可以尝试此DEMO

实际上我已经在每个li中插入了svg（如@Gudz Daniel所说）所以为每个li创建了一个新的svg和新的ID，其余的是svg插件代码和一个Forloop GoodLuck：D

<ul class="legend-list" id="demo">
  <li id="icon-1"></li>
  <li id="icon-2"></li>
  <li id="icon-3"></li>
  <li id="icon-4"></li>
</ul>

var demo=jQuery("#demo");
var cnt=demo.find('li').length;
for(var i=0;i<cnt;i++){
     demo.find('li:eq('+i+')').append('<svg id="svg'+i+'"></svg>');
      var s = Snap("#svg"+i);
     var bigCircle=s.circle(100, 100, 50);
    bigCircle.attr({
        fill: "#bada55",
        stroke: "#000",
        strokeWidth: 5
    });
}

Answer 2

你需要为每个列表元素创建一个新的SVG Snap对象，你不能从svg元素中剪切圆圈，所以在循环中只需创建snap元素，放一个圆圈，然后将这个snap对象插入每个li元素

Snap.svg附加到列表项

2 个答案: