Добавьте дочерний узел во встроенный SVG с помощью JavaScript. Невозможно в IE9?

Я просто хочу добавить новый текстовый узел в SVG на html, используя функцию javaScript accion():

<!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.


javascript svg dom internet-explorer-9
person Jesús Fernando Parra Pérez    schedule 07.02.2013    source источник
comment
Объект не поддерживает это свойство или метод.   -  person Jesús Fernando Parra Pérez    schedule 07.02.2013
comment
Судя по всему, вы используете IE9. Я не думаю, что IE9 так поддерживает SVG, не так ли?   -  person Lightness Races in Orbit    schedule 07.02.2013
comment
Я так думаю, я потратил дни, пытаясь изменить свой svg разными способами (встроить в тег объекта, с помощью javascript в самом svg... и т. д.). Но это невозможно. И в IE7 это было работает нормально...   -  person Jesús Fernando Parra Pérez    schedule 07.02.2013
comment
возможный дубликат перерисовки SVG   -  person cmbuckley    schedule 07.02.2013

Ответы (1)


arrow_upward
13
arrow_downward

Пример ниже работает для меня.

Обратите внимание, что если вы не установите координату 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>
person Robert Longson    schedule 07.02.2013
comment
Все в порядке. Спасибо!. Я не могу голосовать за тебя. не имеют достаточной репутации :(. Надеюсь, у кого-то есть!. - person Jesús Fernando Parra Pérez; 07.02.2013