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

正如Ian所说，你需要使用createElementNS（）将新元素放入SVG名称空间。

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

Demo here

这个SVG标签发生了什么？

1 个答案: