Что происходит с этим тегом SVG?

Question

У меня проблема с SVG-файлом (код ниже). Контекст заключается в том, что я хотел бы, чтобы HTML, чтобы файл активно менял текст внутри элемента после его загрузки. У меня была проблема с этим, так что я начал сужать возможности, пока он не был заключен в одном месте:

<text xmlns="http://www.w3.org/2000/svg" id="svgText" transform="matrix(1 0 0 1 225 260)" text-anchor="middle" fill = "#80ECFF" font-family="'MyriadPro-Regular'" font-size="50" onload= 
    " 
     var svgText = document.getElementById('svgText'); 
     var newLine = document.createElement('tspan'); 
     newLine.setAttribute('x' , '0'); 
     newLine.setAttribute('dy' , '1.2em'); 
     newLine.appendChild(document.createTextNode('point')); 
     document.importNode(newLine , true); 
     svgText.appendChild(newLine); 
    "> 
     <tspan x = '0' dy = '1.2em'>other point</tspan> 
     test 
    </text> 

Я считаю, что часть в «document.importNode» является ненужным, поскольку узел уже находится в правильном месте для этого документа, однако, я не думаю, что он наносит какой-либо ущерб. Самая странная вещь происходит с этим кодом: узел создается в DOM, но он не может иметь на нем атрибуты элементов, и это похоже на то, что он фактически не существует. Каждый браузер, который я пробовал, показывает, что узел помещается внутри текстового элемента, но каждый раз, когда он страдает от такого призрачного несчастья, где это похоже на то, что браузер знает, что он есть, но на самом деле это преступление.

Любая помощь будет принята с благодарностью; Я работаю над этой проблемой уже более двух часов, и я, кажется, единственный, кто когда-либо имел это.

Answer 1

Как сказал Ян, вам нужно использовать createElementNS(), чтобы поместить новый элемент в пространство имен SVG.

document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); 

Demo here