如何使用 js 替换 svg 中的文本？

Question

在这段代码中，我试图将一个 svg 文件加载到快照纸中，然后将其转换为一个组：

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

请问我该如何解决这个问题？

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

编辑：@dystroy，你的意思是这样的吗？：

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

} );

编辑：@dystroy，如果我这样做，一些 svg 样式将不会被复制：

请检查这两个有何不同：

将 svg 节点复制到 g:

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

对

原始 svg 文件：

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

Answer 1

您应该将 fill-rule 属性添加到 svg 元素。
原始svg文件有fill-rule属性，值为“evenodd”，但是html中描述的svg元素没有fill-rule，所以浏览器将fill-rule属性的“nonzero”作为默认值。
因此，复制的 svg 图形看起来其样式信息丢失了。

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