现象
在SVG文件或HTML文件中进行JS代码开发的时候,会碰到这种情况:明明在SVG文件中已经创建了某个对象,但JS代码中通过Id获取该对象,并对该对象的属性进行设置的时候会提示错误(该错误可以在浏览器中按F12—console/控制台 查看)。
const path = document.getElementById('pathcurve');
let d = 'M' + xData_curve[0] + ',' + yData_curve[0];
path.setAttribute('d', d);
原因分析
这是因为在SVG或HTML文件中执行JS代码的时候,DOM元素还未完全加载,此时就在JS代码中试图访问它,就会出现这个问题。
解决方案
1、可以尝试将JS代码放到Windows.onload事件处理函数中进行处理,如代码所示
window.onload = function() {
let path = document.getElementById('pathcurve');
if (path ) {
path .setAttribute('d', 'd');
} else {
console.error('Element with id "path " not found');
}
}
2、简单的方法,就是将JS代码放到整个SVG或HTML文件的底部,确保上方的DOM元素都加载完成再执行JS代码。注意,后期通过SVG或HTML编辑软件增加元素的时候,元素会默认放在文件的底部,注意调整JS代码的顺序。