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.
