使用JavaScript将子节点添加到内联SVG。在IE9上不合适？

Question

I just want add a new text node in a SVG on a html using accion() javaScript function: 我只想使用accion（）javaScript函数在html上的SVG中添加一个新的文本节点：

<!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"); 但是SVGDocument.createTextNode("text"); return an error: Object does not support this property or method . 返回错误： Object does not support this property or method 。 I think the problem is I can't get a correct reference to idSVG element. 我认为问题是我无法正确引用idSVG元素。 I'm using IE9. 我正在使用IE9。

Answer 1

The example below works for me. 以下示例适用于我。

Note that if you don't set ay co-ordinate the default 0, 0 is likely outside the svg bounding box. 请注意，如果未设置y坐标，则默认值为0，0可能位于svg边界框之外。

<!DOCTYPE> 
<html>
<body>
<head>
<script type="text/javascript"> 
    function accion(){
        var svg = document.getElementById("idSVG");
        var text2 = document.createElementNS("http://www.w3.org/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>

使用JavaScript将子节点添加到内联SVG。在IE9上不合适？

问题描述

1 个解决方案

解决方案1
11 已采纳 2013-02-07 13:51:30

使用JavaScript将子节点添加到内联SVG。 在IE9上不合适？

问题描述

1 个解决方案

解决方案1 11 已采纳 2013-02-07 13:51:30

使用JavaScript将子节点添加到内联SVG。在IE9上不合适？

解决方案1
11 已采纳 2013-02-07 13:51:30