向加載的svg文件動態添加元素

從InkScape加載svg文件後，我想向程序控制下創建的圖形添加新元素。這似乎工作正常，如果我們只是改變已存在的元素的屬性，但新創建的，即使它們在檢查DOM時出現，也不會顯示！向加載的svg文件動態添加元素

一個手 - 簡易SVG測試文件：

<svg id="svg8" width="1e3" height="750" version="1.1" 
viewBox="0 0 264.58333 198.43751" xmlns="http://www.w3.org/2000/svg"> 

    <g id="layer"><circle id="cc0" cx="20" cy="20" r="10"/></g> 

</svg>

的JavaScript/HTML文件：

<!doctype html><html><head><meta charset="UTF-8"/> 

<script> 
    function addCircle() { 
     var svgDoc = document.getElementById("test"); 
     var svg = svgDoc.contentDocument; 
     var svgns = svgDoc.namespaceURI; 

     // Ok, this changes the circle to red 
     var c0 = svg.getElementById("cc0"); 
     c0.setAttribute("fill", "#ff0000"); 

     var layer = svg.getElementById("layer"); 

     // Create a circle inside layer "g" 
     var cc = document.createElementNS(svgns, "circle"); 
     cc.setAttribute("cx", "50"); 
     cc.setAttribute("cy", "50"); 
     cc.setAttribute("r", "20"); 

     layer.appendChild(cc); 
     // However it's not updating the screen 
     // even if DOM shows the circle is there, inside the "g" 
    } 
</script></head> 

<body> 
<object id="test" data="test.svg" type="image/svg+xml"></object> 
<script>  
    document.onreadystatechange = function(){ 
     if(document.readyState === 'complete') addCircle(); } 
</script> 
</body> 
</html>

我在做什麼錯？或者我錯過了什麼？謝謝！

來源

2017-04-20 Francisco

您使用Chrome，並且從本地文件是（即file：//）？你可以在不同的瀏覽器中試用它嗎？ –

我試過Linux/Ubuntu 16.0.4中的Chrome 57和Firefox 52。它不是一個本地文件，但它由運行在與瀏覽器相同的機器上的apache服務器提供服務。（在http://127.0.0.1/X.html） – Francisco

它與您傳遞來創建圓的svg命名空間有關。試試這個

var cc = document.createElementNS("http://www.w3.org/2000/svg", "circle");

來源

2017-04-20 07:35:50

它的工作！謝謝:) – Francisco

@Francisco - 如果我的靈魂幫助你，那麼你可以請投我的答案 –

我做到了！但由於我是一個新手在stackoverflow我的投票還沒有顯示。 ... – Francisco

您會得到<object>元素的namespaceURI。
你需要的是內部文件的documentElement的一個：

function addCircle() { 
    // this is the <object> 
    var svgDoc = document.getElementById("test"); 
    var svg = svgDoc.contentDocument; 
    // here get the real svg document 
    var svgns = svg.documentElement.namespaceURI; 
    //...

由於a plunker因爲stacksnippets®不會允許內部框架的修改...

來源

2017-04-20 08:10:11 Kaiido

是的...命名空間;）它的工作，謝謝！ – Francisco

您的解決方案非常有效，但是您能否對自己的評論更加明確：「由於stacksnippets®不允許修改內部框架，因此可能會導致重擊......」謝謝。 – Francisco

Stacksnippets是一個堆棧交換系統，允許我們在帖子內部有工作代碼樣本。但他們確實使用了snadboxed iframe，這會阻止我們操縱內部框架。所以我給了你一個外部鏈接給plunkr，它提供了類似的服務，沒有這個限制。 – Kaiido

向加載的svg文件動態添加元素

回答

相關問題