如何使用js替换svg中的文本? [英] how to replace text inside an svg using js?

问题描述

在这段代码中，我试图将svg文件加载到快照纸中，然后通过以下方式将其转换为组:

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

请问该如何解决?

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，您是说这样的话吗?:

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

} );

@ dystroy，如果我采用这种方式，某些svg样式将不会被复制:

@ 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:

将svg节点复制到g:

copying over the svg nodes to an g:

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

vs

原始svg文件:

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

推荐答案

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

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

这篇关于如何使用js替换svg中的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！