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

You should do DOM manipulation instead of text manipulation : create g nodes and append to them the content of the svg nodes. — Denys Séguret, Jul 28 '14 at 10:26
Thank you dystroy. could you check my edit to see if that is what you mean please? — user3117671, Jul 28 '14 at 10:38
Thank you Gena, each svg would have only one occurrence of those. so if it works that would be fine for me. — user3117671, Jul 28 '14 at 10:40

score 1 · Accepted Answer · answered Jul 29 '14 at 05:03

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'); 
});

answered Jul 29 '14 at 05:03

defghi1977

5,081
1
30
29

WoW! thank you very much @ defghi1974. That does the magic. Does that copy any other svg attribute it might have? And also why this code: maing.transform('r45'); doesn't work please?! here is the link if you want to try it live: http://jsbin.com/geyog/3/edit – user3117671 Jul 29 '14 at 06:46
Yes, but it is case by case. And "maing" is instanceof Set object of Snap.svg, so this doesn't implement transform method. You must read SVG 1.1se recommendation and api reference of Snap.svg. – defghi1977 Jul 29 '14 at 07:09
Thank you @ defghi1974. So, if I want to copy all the attribute an svg has, is there a way to call for all of them? And how can I make the maing to be transformable please? How can I append that to a g? – user3117671 Jul 29 '14 at 07:30
"svg" element is not transformable, so you need to do is wrap the inner svg element contains loaded graphics by g element and set transform attribute to the g element. – defghi1977 Jul 29 '14 at 08:20
@ defghi1974.Could you please tell me how to do that in this example?: http://jsbin.com/geyog/3/edit – user3117671 Jul 29 '14 at 08:27
– defghi1977 Jul 29 '14 at 08:34
@ defghi1974.Is that possible to do that using js or snap code, programatically, please?! – user3117671 Jul 29 '14 at 08:40
Thank you @ defghi1974.I figured that out! – user3117671 Jul 29 '14 at 11:29

how to replace text inside an svg using js?

1 Answers1

Linked