Проблема с SVG скриптингом

Question

Я пытаюсь заставить некоторые базовые сценарии ecma работать в имеющемся у меня документе SVG.

<svg contentScriptType="text/ecmascript" width="957px"
     xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify"
     contentStyleType="text/css" viewBox="-2998 -1920 6580 5780" height="841px"
     preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
     version="1.1" onload="init(evt)"">

<script type = "text/ecmascript">
    <![CDATA[
        function init(evt) {
            if (window.svgDocument == null) {
                svgDoc = evt.target.ownerDocument;
            }
        }

        function displayName(name) {
            svgDoc.getElementById("node_name").firstChild.data = name;
        }
    ]]> </script>

<text class = "label" id = "node_name" x="10" y="390"></text>

<circle fill-opacity="0.2" fill="#3ccb5d" r="40.0" cx="1568.2628"
class="46960" cy="-1518.6278" stroke="#000000"
stroke-opacity="0.5" stroke-width="1.0" 
onmouseover="displayName('Showing Nodes')"/>
</svg>

По какой-то причине, однако, каждый раз, когда я пытаюсь запустить событие displayName из круга, я получаю "Нельзя установить свойство" data "с нулевым значением" в последней строке моего тега svg (onload="init(evt)"), и я не совсем уверен, почему. Мысли?

Answer 1

Вы действительно должны использовать textContent, который будет работать независимо от того, есть ли у узла дочерние элементы, например:

function displayName(name) {
    svgDoc.getElementById("node_name").textContent = name;
}

Answer 2

Хорошо, так что мне удалось найти ответ на этот вопрос, но он настолько нелогичен, что я чувствую, что действительно должен опубликовать его здесь. Очевидно, причина этого не в том, что если между текстовым тегом ничего нет, его данные обрабатываются как пустые, а не как пустые.

Broken Code:    
    <text class = "label" id = "node_name" x="10" y="390"></text>
    getElementById('node_name').firstChild == null

Working Code:
    <text class = "label" id = "node_name" x="10" y="390"> </text>
    getElementById('node_name').firstChild == " "