Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 16

16.7 Methoden fuer den Zugriff auf Text

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.




index  |  Kapitel 16  |  16.6  <<  | 16.7 |  >>  16.8   Methoden zur Manipulation von Attributen/Eigenschaften