我正在尝试编写一个脚本，该脚本将动态创建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”。
我该怎么做才能解决此问题？
最佳答案
创建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);关于javascript - 尝试访问SVG元素时，getElementById返回null，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56386573/