I have a problem with an SVG file (code below). The context is that I would like the HTML that the file is in to actively change the text inside the element after it has loaded. I had a problem with this, so I started narrowing down the possibilities until it was confined in one spot:
<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>
I believe that the 'document.importNode' part is unnecessary as the node is already in the correct place for this document, however I don't think it's doing any damage. The strangest thing happens with this code: The node is created in the DOM, but it's unable to have element attributes placed on it, and it's like it doesn't actually exist. Every browser I've tried shows the node gets placed inside the text element, but every time it suffers this ghost-like affliction, where it's like the browser knows it's there, but it's a crime to actually use it.
Any help would be greatly appreciated; I've been working on this problem for over two hours now, and I seem to be the only one who has ever had it.
As Ian said, you need to use createElementNS() to put the new element into the SVG namespace.
document.createElementNS('http://www.w3.org/2000/svg', 'tspan');