How to remove an svg container and put its content to a group( id= g8 for instance)?

Question

How to remove an svg container and put its content onto a group( id= g8 for instance)?

 var content1 = select('svg1').removeChild('all');
content1.addto('g8);

I need to remove the svg container:

<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" viewBox="0 0 481.89 368.504"> </svg>

And put everything :

<g id = 'g8'> svg content goes here...</g>

Edit: How can I fix this code to load only the innerSVG code of the svg file into an svg group named svg1?

Snap.load( "bike2.svg", function( f ) {

     g1 = f.select("innerSVG"); // I want to select the svg content only.

    s.append(g1);

    g1.attr({id: 'g1' });

Edit: this code works when I select a g from that svg:

g1 = f.select("#g4"); // but I want all the content of the svg like all the elements and groups without its container.

I hope that's an inner svg element because having a `` as a root to your SVG content won't work. — Robert Longson, Jul 15 '14 at 06:14
Thank you Robert. Actually what I am trying to do is to load svg files into snap svg. So I want copy only the svg contents each as a group into snap paper which is going to be the main svg container. — user3117671, Jul 15 '14 at 10:17
innerHTML may help you there: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML — Robert Longson, Jul 15 '14 at 10:23

score 0 · Accepted Answer · answered Jul 16 '14 at 06:49

0

Try Snap.ajax method instead of Snap.load like this.
I don't know the structure of "bike2.svg", but I think you can move the elements from bike2.svg to main contents.

Snap.ajax("bike2.svg", function(request){
    var svg = Snap(request.responseXML.documentElement);
    var g = svg.select("svg>*");//you can select any elements.
    s.append(g);
});

answered Jul 16 '14 at 06:49

defghi1977

5,081
1
30
29

Thank you defghi1977. could you please check this question as well please?: http://stackoverflow.com/questions/24993189/how-to-replace-text-inside-an-svg-using-js – user3117671 Jul 28 '14 at 10:44
your solution works good just some styling svg is not copied that way so I was thinking about replacing the svg tags with g tags then all the svg info would be copied. – user3117671 Jul 28 '14 at 10:52
I think you should use Paper.image method better if what you need to do is only to display outer svg graphics. Snap.ajax method is useful to manipulate dom structure of outer svg graphics. – defghi1977 Jul 28 '14 at 12:24
@ defghi1977, but the problem is if I use paper.outerSVG I get one svg inside another svg. the later process I need to do only accepts one svg tag, not svg inside svg. So I am trying to remove the svg tags from the svg files and make them a group to snap paper.Does this make sense ? – user3117671 Jul 28 '14 at 22:42
see http://stackoverflow.com/questions/24993189/how-to-replace-text-inside-an-svg-using-js/25008525#25008525 – defghi1977 Jul 29 '14 at 05:04

How to remove an svg container and put its content to a group( id= g8 for instance)?

1 Answers1