Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 93
Zur Übersicht

93. Einfacher Lauftext in SVG (25.07.2002)

Das folgende Beispiel verwendet JavaScript zur Erzeugung eines Lauftextes in einem SVG-Dokument. Der Scriptcode selbst ist in analoger Weise in einem HTML-Dokument verwendbar. Entscheidend ist der schreibende Zugriff auf ein Textobjekt, hier in der durch [*] markierten Zeile.


      <!-- SVG-Codeausschnitt -->
      
      <svg xmlns="http://www.w3.org/2000/svg" onload="Ticker()">
      
        <desc>Einfacher Lauftext in SVG by TM 07/02</desc>
      
        <defs>
      
          <script type="text/javascript">
          <![CDATA[
      
          var svgdoc, element, ltxt, i, l;
          svgdoc=document.documentElement;
          element=svgdoc.getElementById("lauftext");
          ltxt="Das ist der Lauftext und der läuft und läuft ... ";
          i=0;
          l=ltxt.length;
      
          function Ticker()
          {
            txt=ltxt.substring(i,l)+ltxt.substring(0,i-1);
            element.childNodes.item(0).setData(txt);      // [*]
            if (i<l)i++;
            else i=0;
            setTimeout("Ticker()",150);
          }
      
          ]]>
          </script>
      
        </defs>
      
        <text id="lauftext" x="20" y="50" style="fill: #F00;
          font-size: 20px">Lauftext</text>
      
      </svg>

      
Zur Vermeidung von Problemen mit Mozilla 1.x-Versionen wurde im Beispiel 93 der im Tipp 91 erläuterte Workaround in der JavaScript-Version verwendet. Hinweis: Verwenden Sie bei Problemen die Download-Version zum lokalen Testen.