Thomas Meinike: In SVG-Datei auf Elemente in einer anderen SVG-Datei zugreifen

Beitrag lesen

Hallo,

Geht das überhaupt aus einer svg-Datei?

Dazu mal ein Beispiel mit je einem (roten) Kreis und einem (gruenen) Rechteck, die in separaten SVG-Dokumenten liegen und ueber embed bzw. iframe eingebunden werden (object waere zwar noch besser, damit klappt das Folgende aber maximal lokal und nicht via http, siehe: http://svglbc.datenverdrahten.de/embed_object_iframe.htm).

Beim Anklicken der roten Kreises wird die x-Koordinate der daneben angeordneten Rechtecke ausgelesen (Ergebnis: x=20).

test.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 03/04</title>
</head>
<body>
embed<br>
<embed name="test1" src="kreis1.svg" width="100" height="100" type="image/svg+xml">
<embed name="test2" src="rechteck.svg" width="800" height="100" type="image/svg+xml">
<br>
iframe<br>
<iframe name="test3" src="kreis2.svg" width="100" height="100" frameborder="0"></iframe>
<iframe name="test4" src="rechteck.svg" width="800" height="100" frameborder="0"></iframe>
</body>
</html>

kreis1.svg (fuer den embed-Test):

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<circle cx="40" cy="30" r="20" style="fill: #F00" onclick="alert('x='+top.window.document.embeds['test2'].getSVGDocument().getElementById('rechteck').getAttribute('x'))"/>
  <text x="15" y="65">Klick mich!</text>

</svg>

kreis2.svg (fuer den object-Test):

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<circle cx="40" cy="30" r="20" style="fill: #F00" onclick="alert('x='+window.top.frames.item('test4').document.embeds[0].getSVGDocument().getElementById('rechteck').getAttribute('x'))"/>
  <text x="15" y="65">Klick mich!</text>

</svg>

rechteck.svg (fuer beide Tests):

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<rect id="rechteck" x="20" y="10" width="40" height="40" style="fill: #090"/>

</svg>

Das Ganze (speziell der Zugriff ueber top.window) ist zurzeit leider auf die Kombination IE+ASV beschraenkt.

MfG, Thomas

--
SVG - Learning By Coding
http://svglbc.datenverdrahten.de/