Zugriff auf svg Element in HTML gibt immer "null" zurück?
Hallo zusammen,
folgendes Problem:
Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).
So sieht erstmal der ganze HTML Code aus:
<!DOCTYPE html>
<html>
<head>
<title>Arduino Daten</title>
<link rel="icon" href="data:,">
<script src="scripts/script.js"></script>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>
Der betroffene Teil in meinem javascript Code:
function insertDots(cx, cy) {
const svgObject = document.getElementById("svgObject");
console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"
svgObject.addEventListener("load", function() {
if (svgObject && svgObject.contentDocument) {
const sonarSVG = svgObject.contentDocument.getElementById("sonar");
console.log(sonarSVG);
}
});
}
(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)
In meiner .svg Datei gibt es definitv die id= "sonar":
<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128, 128, 0.25)" />
</svg>
So sieht meine Ordnerstruktur aus:
Website
│ SonarVisuallisierung.html
│
├── scripts
│ script.js
│
└── styles
style.css
sonarGrafik.svg
Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)
Danke für alle Lösungsvorschläge.
2 Antworten
Ich habe es gerade mal ausprobiert: Dein Code funktioniert, wenn man ihn auf einen Webserver hochlädt oder einen lokalen Webserver nutzt. Direkt lokal funtioniert er aus Sicherheitsgründen nicht, siehe auch https://support.mozilla.org/en-US/questions/1279538
Wenn du Python installiert hast, führe in dem Verzeichnis folgendes in einer Konsole aus:
python -m http.server 8080
Dann kannst du die Webseite unter 127.0.0.1:8080 aufrufen und es sollte funktionieren.
Zwei Wege:
1.) Binde die SVG Datei direkt in das HTML ein statt via Object Tag, dann kannst es via JS aus dem HTML ansprechen
2) Binde das JS direkt in die SVG ein