動態將元素添加到已加載的svg文件

Question

從InkScape加載svg文件后，我想在程序控制下創建的圖形中添加新元素。 如果僅更改已經存在的元素的屬性，這似乎很好用，但是即使在檢查DOM時出現了新創建的元素，也不會顯示它們！

手工簡化的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>

我究竟做錯了什么？ 還是我想念什么？ 謝謝！

Answer 1

它是創建圈子所傳遞的svg命名空間的問題。 嘗試這個

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

Answer 2

您正在獲取<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;
  //...

作為一個笨拙的人，因為stacksnippets®不允許修改內部框架...

動態將元素添加到已加載的svg文件

問題描述

2 個解決方案

解決方案1
1 2017-04-20 07:35:50

解決方案2
0 2017-04-20 08:10:11

動態將元素添加到已加載的svg文件

問題描述

2 個解決方案

解決方案1 1 2017-04-20 07:35:50

解決方案2 0 2017-04-20 08:10:11

解決方案1
1 2017-04-20 07:35:50

解決方案2
0 2017-04-20 08:10:11