SVG或HTML文件中JS代码提示 Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)

现象

在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代码的顺序。