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

您获得了namespaceURI元素的<object> 你需要的是内部文档的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®不允许修改内框...

动态添加元素到加载的svg文件

2 个答案: