2

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>

ただしSVGDocument.createTextNode("text");、エラーを返しますObject does not support this property or method。問題は、idSVG要素への正しい参照を取得できないことだと思います。IE9を使用しています。

4

1 に答える 1

14

以下の例は私のために働きます。

ay座標をデフォルトの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>
于 2013-02-07T13:51:30.633 に答える