Snap.svg 附加到列表项

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。它是任意的，但假设模式是 "circ-1"、"circ-2"、"circ-3" 等

我想知道如何获取每个圆圈并将它们附加到每个列表项。我知道这可能就像某种循环一样简单，但我一想到它就失去理智了。

有人曾经这样做过或有什么建议吗？

Answer 1

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

Answer 2

这里你可以试试这个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
    });
}

Snap.svg 附加到列表项

Snap.svg appending to list items

javascript

jquery

svg

snap.svg