Um auf Elementknoten eines SVG Dokuments zuzugreifen können Sie
folgende Methoden des document-Objekts verwenden:
-
getElementById()
Greift auf das Element mit der entsprechenden ID zu. Diesem Element muß daher
mit Hilfe des id-Attributs eine eindeutige
ID zugeordnet sein,
die der Methode als Parameter übergeben wird.
Beachten Sie: Wenn Sie, wie in diesem Fall, einer Methode Zeichenketten
als Parameter übergeben, müssen Sie diese in einfache oder doppelte Anführungszeichen
setzen.
-
getElementsByTagName()
Greift auf alle Elemente des entsprechenden Elementnamens zu und liefert eine
Liste dieser Elemente zurück. Der Elementname wird als Parameter übergeben.
Die Länge dieser Liste, d.h. die Anzahl der gefundenen
Elemente kann durch die Methode getLength() ermittelt werden,
die auf eine Element-Liste angewendet, eine Ganzzahl zurückgibt.
Auf einzelne Elemente dieser Liste können Sie mit Hilfe der Methode
item() zugreifen. Diese Methode wird ebenfalls auf
die Element-Liste angewendet und erwartet als Parameter eine Ganzahl, welche die Position
des Elements innerhalb der Liste angibt. Dabei beginnt die
Nummerierung innerhalb der Liste bei 0.
-
documentElement
Enthält das svg-Element, also das Wurzelelement der Grafik. Dieses Attribut
ist sehr nützlich, wenn Sie Knoten oder Elemente manipulieren wollen.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="140px" height="62px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Javascript und SVG</title>
<desc>
Javascript: Methoden für den Zugriff auf SVG Elemente.
</desc>
<defs>
<!-- der Script Bereich -->
<script type="text/javascript">
<![CDATA[
function meldung3(){
var but = document.getElementById('button');
var ubut = document.getElementById('usebut');
var rects = document.getElementsByTagName('rect');
var zrects = document.getElementsByTagName('rect').getLength();
var rect = document.getElementsByTagName('rect').item(0);
alert("document.getElementById('button'): "
+ but
+ "\ndocument.getElementById('usebut'): - "
+ ubut
+ "\ndocument.getElementsByTagName('rect'): - "
+ rects
+ "\ndocument.getElementsByTagName('rect').getLength(): - "
+ zrects
+ "\ndocument.getElementsByTagName('rect').item(0): - "
+ rect);
}
]]>
</script>
<!-- Styles und Filter -->
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:12px;
font-weight:bold;}
rect {fill:#33cc33; stroke:black;}
]]>
</style>
<filter id="filter" x="-.3" y="-.3" width="1.9" height="1.9">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"
result="out1" />
<feOffset dx="2" dy="2"
result="out2" />
<feSpecularLighting in="out1"
surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#999999">
<fePointLight x="-100" y="-100" z="100"/>
</feSpecularLighting>
<feComposite in2="SourceAlpha" operator="in"
result="out3"/>
<feComposite in="SourceGraphic" in2="out3"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
result="out4"/>
<feMerge>
<feMergeNode in="out2"/>
<feMergeNode in="out4"/>
</feMerge>
</filter>
<!-- der Button -->
<g id="button" style="filter:url(#filter)">
<rect x="40" y="70" width="80" height="20"
rx="5" ry="5" />
<text x="58" y="84">onclick</text>
</g>
</defs>
<!-- die Instanz des Buttons -->
<use id="usebut" xlink:href="#button" x="-10" y="-50"
onclick="meldung3();" />
</svg>
Wenn Sie auf den Button des obigen Beispiels klicken wird ein
alert-Fenster angezeigt, in dem
Sie die Ausgabe der in diesem Unterkapitel verwendeten Methoden
betrachten können.
Rückgabewert der Methode getElementById() auf das SVG Objekt button ist
folgender String: object SVGGElement - also ein DOM Objekt, das
das verwendete g-Element repräsentiert. Der Rückgabewert der
gleichen Methode auf die, durch das use-Element verwendete Instanz des button (usebut),
ist daher wie folgt: object SVGUseElement.
Durch die Methode getElementsByTagName() wird danach auf alle verwendeten
rect-Elemente zugegriffen. Der Rückgabewert ist eine Liste von Elementknoten:
object NodeList. Die Länge dieser Liste wird anschließend durch die Methode
getLenght() ermittelt und beträgt 1,
da im SVG Dokument nur 1 rect-Element
verwendet wird. Zuletzt wird mit der Methode item() das erste Element der
Liste ermittelt (Index 0). Der Rückgabewert ist logischerweise: object SVGRectElement.
|