how to replace text inside an svg using js?

Question

in this code I am trying to load an svg file into snap paper and then convert it to a group by :

replacing <svg   with <g   and  </svg>  with </g>  ?

how can I fix this to work please?

var s1 = Snap('#svg1');



  Snap.load( "https://dl.dropboxusercontent.com/u/140225334/bicycle.svg", function( frag ) {
var maing = s1.g();
maing.append(frag);
    maing.attr({id: 'maing' }); 
   // city_name=city_name.replace(/ /gi,'_'); 
   var maing = maing.replace("<svg", "<maing").replace("</svg>", "</maing>");   // how this can be fixed to work?!

Edit: @ dystroy, do you mean something like this?:

var s1 = Snap('#svg1');




  Snap.ajax("https://dl.dropboxusercontent.com/u/140225334/bike2.svg", function(request) 
            {
    var svg = Snap(request.responseXML.documentElement);
    var maing = svg.selectAll("svg>*");//you can select any elements.

    s1.append(maing);
    maing.attr({id: 'maing' });

} );

Edit: @ dystroy, If I go this way some svg styling is not going to be copied over:

please check to see how these 2 would differ:

copying over the svg nodes to an g:

http://jsbin.com/geyog/1/edit

vs

original svg file:

https://dl.dropboxusercontent.com/u/140225334/bike2.svg

Answer 1

You should add fill-rule attribute to svg element.
Original svg file has fill-rule attribute which value is "evenodd", but svg element described in html has no fill-rule, so browser treats the fill-rule attribute has "nonzero" as default value.
Thus the copied svg graphic looks like its style info was lost.

Snap.ajax("https://dl.dropboxusercontent.com/u/140225334/bike2.svg", function(request) 
            {
    var maing = s1.g();
    var svg = Snap(request.responseXML.documentElement);
    var maing = svg.selectAll("svg>*");//you can select any elements.
    //copy fill-rule attribute.
    s1.attr("fill-rule", svg.node.getAttribute("fill-rule"));
    s1.append(maing);
    maing.attr({id: 'maing' });
    //  maing.transform('r45'); 
});