CODEWITHSUNDEEP
javascriptjquerysvgsnap.svg
Alex Marple
Alex Marple

Reputation: 3048

Snap.svg appending to list items

I have a list like so:

<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>

And I'm using Snap and an $.each() with JSON data to create a bunch of circles like so:

<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>

I was able to determine that Snap adds an id to all of these which I can grab. It's arbitrary but let's say the pattern is "circ-1", "circ-2", "circ-3", etc etc.

What I'm wondering is how I can grab each of those circles and append them to each list item. I know it's probably something as simple as some sort of loop but I'm losing my marbles thinking about it.

Anyone ever done this before or have any advice?

Upvotes: 0

Views: 781

Answers (2)

CY5
CY5

Reputation: 1580

Here this you can try this DEMO

Actually i have inserted svg inside every li (as said by @Gudz Daniel) so a new svg is created for each li with new ID and rest is svg plugin code and a 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
    });
}

Upvotes: 1

Danylo Gudz
Danylo Gudz

Reputation: 2656

You need to create a new SVG Snap objects for each list element, you can't cut circle out of an svg element, so in loop just create snap elements, put there a circle, and this snap object insert into each li element

Upvotes: 0

Related Questions