Axel: Frage zum Wiki-Artikel „DOM-Scripting“

Beitrag lesen

problematische Seite

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?