Question

我在这里学到了stackoverflow，你可以动态地将svg元素插入到HTML文件中，如下所示。

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

但第二个失败了。

请指出第二个错误。

提前谢谢。

Answer 1

问题就在于xlink:href，需要在xlink命名空间中：

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

其余的代码可以在非命名空间的形式下正常工作。

如何将svg代码翻译为javascript代码？

1 个答案: