向加载的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文件动态添加元素

回答

相关问题