如何將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代碼？

回答

相關問題