Question

我正在尝试编写一个脚本，该脚本将动态创建SVG元素并显示它。但是，当我设置SVG元素的ID，然后尝试使用Document.getElementById（）访问它时，它将返回null。我正在使用window.onload来确保在调用脚本之前已经加载了文档。

<body>
  <script>
  function buildSVG(color) {
  const shape = `<rect x="0" y="0" width="90" height="90" stroke="black" fill="${color}"/>`;
  return shape;
}


function addSVG(color) {
  let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.id = "svgID";
  let elem = document.getElementById("svgID");
  elem.setAttribute('width', '600');
  svg.setAttribute('height', '250');
  svg.innerHTML = buildSVG(color);
  svg.setAttribute('style', 'border: 1px solid black');
  document.body.appendChild(svg);
}
  window.onload = addSVG("cyan");
  </script>
</body>

我希望显示一个青色方块。但是，出现错误“无法读取null的属性setAttribute”。

该如何解决？

Answer 1

在创建svg元素时，您已经在分配的变量中对其进行了引用。无需再次从文档中获取它。这甚至是不可能的，因为它尚未添加到文档中。这是更正的代码：

function buildSVG(color) {
  const shape = `<rect x="0" y="0" width="90" height="90" stroke="black" fill="${color}"/>`;
  return shape;
}


function addSVG(color) {
  let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.id = "svgID";
  svg.setAttribute('width', '600');
  svg.setAttribute('height', '250');
  svg.innerHTML = buildSVG(color);
  svg.setAttribute('style', 'border: 1px solid black');
  document.body.appendChild(svg);
}
window.onload = addSVG("cyan");

// after 1 second: get the svgID-element and change the border.
setTimeout(function(){
  document.getElementById('svgID').setAttribute('style', 'border: 1px dashed red');
}, 1000);

尝试访问SVG元素时，getElementById返回null

1 个答案: