Antwort an „Axel“ verfassen

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?

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen