admin管理员组

文章数量:1278883

I just want add a new text node in a SVG on a html using accion() javaScript function:

<!DOCTYPE> 
<html>
<body>
<head>
<script type="text/javascript"> 
    function accion(){
        var SVGDocument = document.getElementById("idSVG");
        var text2 = SVGDocument.createTextNode("text");
        SVGDocument.appendChild(text2);
}       
</script>
</head>

<input type="button" onclick="accion()" value="GO!!"/>

<svg id="idSVG">
   <text id="texto" x="50" y="35" font-size="14">PRUEBA</text>
</svg>

</body>
</html>

But SVGDocument.createTextNode("text"); return an error: Object does not support this property or method. I think the problem is I can't get a correct reference to idSVG element. I'm using IE9.

I just want add a new text node in a SVG on a html using accion() javaScript function:

<!DOCTYPE> 
<html>
<body>
<head>
<script type="text/javascript"> 
    function accion(){
        var SVGDocument = document.getElementById("idSVG");
        var text2 = SVGDocument.createTextNode("text");
        SVGDocument.appendChild(text2);
}       
</script>
</head>

<input type="button" onclick="accion()" value="GO!!"/>

<svg id="idSVG">
   <text id="texto" x="50" y="35" font-size="14">PRUEBA</text>
</svg>

</body>
</html>

But SVGDocument.createTextNode("text"); return an error: Object does not support this property or method. I think the problem is I can't get a correct reference to idSVG element. I'm using IE9.

  • javascript
  • dom
  • svg
  • internet-explorer-9
Share Improve this question edited Feb 7, 2013 at 12:05 J.F. asked Feb 7, 2013 at 11:26 J.F.J.F. 4031 gold badge5 silver badges18 bronze badges 4
  • Object does not support this property or method. – J.F. Commented Feb 7, 2013 at 11:42
  • Apparently you're using IE9. I don't think that IE9 supports SVG like this, does it? – Lightness Races in Orbit Commented Feb 7, 2013 at 11:44
  • I'm Think so, I have spent days trying to modify my svg, in many ways (embed, in a object tag, with javascript on the svg itself...etc...) But is impossible.And on IE7 it was working fine... – J.F. Commented Feb 7, 2013 at 11:51
  • possible duplicate of SVG repaint – cmbuckley Commented Feb 7, 2013 at 12:16
Add a ment  | 

1 Answer 1

Reset to default 14

The example below works for me.

Note that if you don't set a y co-ordinate the default 0, 0 is likely outside the svg bounding box.

<!DOCTYPE> 
<html>
<body>
<head>
<script type="text/javascript"> 
    function accion(){
        var svg = document.getElementById("idSVG");
        var text2 = document.createElementNS("http://www.w3/2000/svg", "text");
        text2.setAttribute("y", "100");
        var textContent = document.createTextNode("this is the text content");
        text2.appendChild(textContent);
        svg.appendChild(text2);
}       
</script>
</head>

<input type="button" onclick="accion()" value="GO!!"/>

<svg id="idSVG">
   <text id="texto" x="50" y="35" font-size="14">PRUEBA</text>
</svg>

</body>
</html>

本文标签： domAdd a child node to an inline SVG with JavaScript Imposible on IE9Stack Overflow

版权声明：本文标题：dom - Add a child node to an inline SVG with JavaScript. Imposible on IE9? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741232601a2362380.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。