更改 svg 元素仅在某些时候有效[重复]答案

【问题标题】：Change svg element only works some of the times [duplicate]更改 svg 元素仅在某些时候有效[重复]
【发布时间】：2015-02-13 23:21:18
【问题描述】：

我正在尝试使用 javascript 和 html5 为项目创建 HMI。在第一个实验中，我只想更改 svg 文档中的文本元素。

svg 对象在 html 中定义如下：

<object id="image-svg" width="800" height="800" type="image/svg+xml" data="image.svg"></object>

这个脚本：

function update_txtPv( val )
{
    var imageSvgDoc = document.getElementById( "image-svg" ).contentDocument;
    var txtPv = imageSvgDoc.getElementById( "txtPv" );
    txtPv.textContent = val;
}

update_txtPv( "test" );

页面加载时调用一次。

问题是，如果我刷新页面十次，它只会将文本对象设置为“测试”大约 3 次。

如果我添加警报（“某事”）；在它工作的函数的开头。

发生了什么事？

//约翰

【问题讨论】：

确保您的 svg 已加载 (document.getElementById( "image-svg" ).addEventListener('load',function(){update_txtPv( "test" );});) + 在您的 js 控制台中查看抛出的错误。
@Kaiido 这是有道理的。但有时我仍然会收到“TypeError: imageSvgDoc is null”。

标签： javascript svg

【解决方案1】：

所以...原来我需要等待 svg 文档加载后才能开始修改它。

最终使用来自this 线程的解决方案。非常感谢 Kaiido 指出在调用函数之前我需要等待 svg 完成加载。

【讨论】：