Wrap each path with <li>-element

[Da Hannes]

I have an SVG-file with hundreds of different paths inside it.

For each path i want to create an extra <li>-element and an <svg>-element to wrap around my path, like:

<li>

   <svg> 

 <path/>

        </svg> 

</li>

 

Then I want to append all these <li>-elements (with the different paths inside them) to a given <ul>-element in my html-code.

I guess this can be done with the .before and .after functions of Snap but i cannot figure out how to loop through all the paths properly.

Can Anyone help me how to do this?

 

[Ian]

You can selectAll and then forEach, like below. However what you want to do sounds a bit unusual, so without a bit more context of why you are doing that, its hard to know if there may be an alternative approach in general. So if you want you could explain a bit more for ideas, but the code below should help with the specific question how to loop through paths.

s = Snap(400, 620);

var p1 = s.path('M100,100Z');

var p2 = s.path('M200,200Z');

var set = s.selectAll('path');

set.forEach( function( el ) { console.log( el ) } );

[Da Hannes]

Thanks for your quick response Ian.

I did a little research and I managed to do it with jQuery .wrap() function.

Just selecting my elements and wrapping <svg><li></li></svg> around.