如何将svg代码转换为javascript代码? [英] How to translate svg code to javascript code?

问题描述

我在这里了解到stackoverflow，您可以按如下方式将svg元素动态插入HTML文件中.

I learned here stackoverflow that you can dynamically insert svg element into an HTML file as follows.

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

而且效果很好. 我希望您也可以按照以下步骤继续操作.

And it works well. I expected that you can continue it as follows too.

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

但是第二个失败了.

请指出第二个问题是什么.

Please point out what is wrong in the second one.

谢谢.

推荐答案

这只是问题xlink:href，它必须位于xlink命名空间中:

It's just the xlink:href that's the problem and that needs to be in the xlink namespace:

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

其余代码将以非命名空间形式正常工作.

The rest of the code will work fine in the non-namespaced form.

这篇关于如何将svg代码转换为javascript代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！