如何将svg代码转换为javascript代码？

-1

我在这里学到了stackoverflow，你可以动态地将svg元素插入到HTML文件中，如下所示。如何将svg代码转换为javascript代码？

var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
    var path = document.createElementNS('http://www.w3.org/2000/svg','path'); 
    path .setAttribute("d","......"); 
    svgnode.appendChild(path); 
    document...........appendChild(svgnode);

它运作良好。我期望你也可以继续如下。

var defs = document.createElementNS('http://www.w3.org/2000/svg','defs'); 
var use = document.createElementNS('http://www.w3.org/2000/svg','use'); 
var path2=document.createElementNS('http://www.w3.org/2000/svg','path'); 
path2.setAttribute("d","...."); 
path2.setAttribute("id","path2"); 
defs.appendChild(path2); 
use.setAttribute("xlink:href","#path2"); 
use.setAttribute("x","10"); 
use.setAttribute("y","10"); 
svgnode.appendChild(defs); 
svgnode.appendChild(use); 
document...........appendChild(svgnode);

但第二个失败。

请指出第二个错在哪里。

预先感谢您。

来源

2012-02-02 seven_swodniw

它在哪里失败？你看到了什么错误信息或症状？ – 2012-02-02 18:23:54

在谷歌浏览器中，生成的新页面保存正确的svg，但不显示图片。虽然将其保存在文件中并打开保存的文件可以显示正确的图片。 – 2012-02-02 19:11:07

这只是xlink:href这就是问题所在，并且需要在XLink命名空间：

use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#path2");

代码的其余部分将在非命名空间的形式很好地工作。

来源

2012-02-02 19:31:26

是的，你修复了我的代码！非常感谢。 – 2012-02-02 19:40:47

如何将svg代码转换为javascript代码？

回答

相关问题