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.
|