In SVG können Sie mit Hilfe eines text-Elements Textdaten in die Grafik
einfügen. Diese Textdaten, d.h. der Inhalt des text-Elements, stellen einen
eigenen Knoten innerhalb der Baumstruktur des SVG Dokuments dar: einen sogenannten
Textknoten.
Dieser Textknoten ist der erste Kind-Knoten des text-Element-Knotens.
Zugriff auf den Textknoten ermöglichen folgende Methoden:
-
getData()
Diese Methode liefert den Inhalt eines Textknotens zurück.
-
getComputedTextLength()
Mit dieser Methode können Sie die Breite eines Textelements, d.h.
der gesamten Zeichkette, in Pixeln ermitteln.
Beachten Sie: Diese Methode wird
auf den Elementknoten des text-Elements angewandt - und nicht
auf den Textknoten.
-
getSubStringLength()
Mit dieser Methode können Sie die Breite einer Teilzeichenkette
innerhalb eines Textelements in Pixeln ermitteln. Diese Methode wird
ebenfalls auf den Elementknoten des text-Elements angewandt.
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 Textknoten.
</desc>
<defs>
<!-- der Script Bereich -->
<script type="text/javascript">
<![CDATA[
function txt(){
var textelement = document.getElementById('text');
var textlaenge = textelement.getComputedTextLength();
var textteil_on = textelement.getSubStringLength(0,2);
var textknoten = textelement.firstChild;
var textdaten = textknoten.data;
alert("Länge des Textes - "
+ textlaenge + " Pixel"
+ "\nLänge der Zeichenkette 'on' - "
+ textteil_on + " Pixel"
+ "\nInhalt des Textknotens - "
+ textdaten);
}
]]>
</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.7" height="1.7">
<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 id="text" x="58" y="84" width="78" height="18">onclick</text>
</g>
</defs>
<!-- die Instanz des Buttons -->
<use id="usebut" xlink:href="#button" x="-10" y="-50"
onclick="txt();" />
</svg>
Die Funktion txt() im obigen Beispiel greift, nach Klick auf den Button,
durch die Methode getElementById() auf das
text-Element text zu, um dann in einem
alert-Fenster Informationen zu diesem Element anzuzeigen.
Zuerst wird mit der Methode getComputedTextLength() die Länge der
gesamten Zeichenkette ermittelt. Dann durch die Methode
getSubStringLength() die Länge der Teilzeichenkette on.
Beachten Sie: Beide Methoden werden auf den Elementknoten des
text-Elements angewendet.
Dann wird durch die Methode getFirstChild() der Textknoten
des Elementknotens ermittelt, da der ersten Kind-Knoten eines text-Elements
immer der Textknoten ist. Auf diesen Textknoten wird zuletzt die
Methode getData() angewendet, welche den Inhalt des Textknotens,
d.h. den reinen Textinhalt (die Zeichenkette) ermittelt und zurückliefert.
|