Per Script aus SVG-Datei ein Element verändern.

[Davemab]

Hallo liebe Leute,
ich habe eine SVG-Grafik welche eine Karte darstellt. Diese habe ich als Objekt eingebunden:

  
<object data="karte.svg" id="karte_svg" type="image/svg+xml"></object>  

Wenn ich nun eine Funktion aus der SVG-Datei ausführen will, kann diese nicht auf die Elemente aus der HTML-Datei in der sie eingebunden ist zugreifen:

  
//Code befindet sich in der SVG-Datei. Das Objekt mit der Id "Title" in der HTML-Datei.  
alert(document.getElementById("title").innerHTML);  
//funktioniert so nicht...  

Genau so verhält es sich auch, wenn ich versuche aus der HTML-Datei Elemente in der SVG-Datei anzusprechen...

Weis da jemand Rat?

[molily]

Hallo,

SVG- und HTML-Dokument sind bei der Verwendung von <object> strikt getrennt. Wenn du das aufweichen willst, damit die Scripte gegenseitigen Zugriff auf das DOM haben, so kannst musst du dich von der object-Einbindung lösen.

Beispielsweise ein iframe:

<iframe id="svg" src="karte_svg" src="karte.svg"></iframe>

Damit kannst du in JavaScript via svg.document auf das SVG-Dokument zugreifen.

Innerhalb des SVG-Dokument kann ein Script über parent.document auf das HTML-Dokument zugreifen, wie in HTML-Dokumenten üblich:
http://aktuell.de.selfhtml.org/artikel/javascript/fensterzugriff/

Oder du bettest das SVG-Dokument vollständig ins HTML-Dokument ein, was in HTML5 möglich ist und von neueren Browsern unterstützt wird. Du kannst einfach den gesamten <svg ...>...</svg>-Code ins HTML-Dokument kopieren. Dann findest du mit document.getElementById usw. auch SVG-Elemente mit der gesuchten ID.

Mathias

[Daveman]

Danke für die Antworten.
Aus der SVG-Datei funktioniert es mit dem parent.document gut, allerdings muss eine Virtueller Server (also über den Localhost) eingerichtet sein. Habs erst ohne versucht und war schon halb am verzweifeln ;) Bei der Möglichkeit per getSVGDocument() erkennt er zwar das Objekt, findet aber nicht die Objekte per getElementById(). Ich werde aber bei Gelegenheit noch ein bisschen rum experimentieren...

[Daveman]

Nachtrag: die getSVGDocument() Möglichkeit funktioniert auch einwandfrei, allerdings muss sie leicht verzögert ausgeführt werden, da die SVG-Datei länger zu laden braucht, als das JavaScript.
Hier noch mal ein kleines Beispiel, falls jemand das gleiche Problem hat:

  
<script>  
	function test()  
	{  
		var svg;  
		svg = document.getElementById("karte_svg").getSVGDocument();  
		svg.documentElement.getElementById("Bayern").setAttribute('fill', '#000000');  
  
	}  
	setTimeout("test()",100);  
</script>  

Danke für die Antworten.
Aus der SVG-Datei funktioniert es mit dem parent.document gut, allerdings muss eine Virtueller Server (also über den Localhost) eingerichtet sein. Habs erst ohne versucht und war schon halb am verzweifeln ;) Bei der Möglichkeit per getSVGDocument() erkennt er zwar das Objekt, findet aber nicht die Objekte per getElementById(). Ich werde aber bei Gelegenheit noch ein bisschen rum experimentieren...

[molily]

Nachtrag: die getSVGDocument() Möglichkeit funktioniert auch einwandfrei, allerdings muss sie leicht verzögert ausgeführt werden, da die SVG-Datei länger zu laden braucht, als das JavaScript.

Dafür gibt es ja das load- bzw. das DOMContentLoaded-Ereignis. Wenn du an das document-Objekt des SVGs kommst, kannst du dort ggf. auch einen entsprechenden Event-Handler registrieren.

  svg = document.getElementById("karte\_svg").getSVGDocument();  

Das einfachere .contentDocument scheinen übrigens auch alle modernen, SVG-fähigen Browser zu unterstützen.

Mathias

[1UnitedPower]

Logisch, schließlich zeigt "document" in der SVG-Datei auf das svg-document und "document" in der html-Datei auf das html-document.

Du musst also, wenn du von der html-Datei aus das DOM-Document der SVG-Datei manipulieren willst, erstmal das richtige document besorgen. Dafür bietet die DOM-Api einmal die Eigenschaft contentDocument und die Methode getSVGDocument an.
Ich kann dir allerdings nichts über Browserunterstützung der beiden Attribute verraten. Ein (zumindest unter Firefox 14 funktionierendes) Beispiel zur Verwendung findest du hier. Weiter nützliche Informationen findest du im Mozilla Developer Network

Grüße
-1UnitedPower