ich habe drei Dateien im gleichen Verzeichnis:
index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG mit Button</title>
</head>
<body>
<button id="meinButton">Kreis zeichnen</button>
<object id="svg-object" data="meineSVG.svg" type="image/svg+xml"></object>
<script src="meinSkript.js"></script>
</body>
</html>Quelltext hier
meineSVG.svg
<svg xmlns="http://www.w3.org/2000/svg" id="meineSVG" width="200" height="200">
<rect x="50" y="50" width="100" height="100" stroke="black" fill="none"/>
</svg>
und meinSkript.js
window.onload = function () {
var button = document.getElementById("meinButton");
button.addEventListener("click", function () {
var svgObject = document.getElementById("svg-object");
var svgDoc = svgObject.contentDocument;
var circle = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
circle.setAttribute("cx", 100);
circle.setAttribute("cy", 100);
circle.setAttribute("r", 50);
circle.setAttribute("fill", "red");
svgDoc.querySelector("svg").appendChild(circle);
});
};
Beim ausführen bekomme ich folgenden Fehler:
Cannot read properties of null (reading 'querySelector') at HTMLButtonElement.
Ich scheine von JS aus nicht auf die SVG zugreifen zu können.
Was mache ich falsch?