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

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

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样式将不会被复制：

请检查这些2会有何不同之处：

将svg节点复制到g：

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

VS

原始svg文件：

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

Answer 1

您应该为svg元素添加fill-rule属性原始svg文件具有fill-rule属性，其值为“evenodd”，但html中描述的svg元素没有填充规则，因此浏览器将fill-rule属性视为“非零”作为默认值。
因此，复制的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'); 
});

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

1 个答案: