Question

我在更改外部SVG中的文本时遇到问题。我在这里列出了许多解决方案，但没有一个有效。

添加一个监听器：

document.getElementById('id1').addEventListener('onload', func);

功能：

function func () {

    var ele = document.getElementById('id1'),
        svg = ele.contentDocument,
        p = svg.getElementById('id2');

    alert(p.textContent);
    p.textContent = 'test';

}

我第一次加载它时，p返回null。在第二次加载时，警报返回SVG文本元素中的正确文本，但下一个语句不会更新文本。

为什么它不能在第一次加载时工作，为什么文本不会改变

Answer 1

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
  <text x="40" y="60">more text</text>
  <text>will not display as x and y are missing</text>
</svg>

您需要为要显示的元素设置x和y属性。此外，在设置文本元素的值后，应该发出警报：

p.textContent = 'test';
alert(p.textContent);

使用javascript更改外部SVG文本

1 个答案: