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 92
Zur Übersicht

92. Aktionen ohne Scripts in SVG (16.07.2002)

In einigen vorangegangenen Tipps wurde auf dynamische JavaScript-Aktionen in SVG-Dokumenten eingegangen. Es ist jedoch nicht immer nötig, eigene Scriptfunktionen zu definieren. SVG stellt Techniken bereit, die Aktionen direkt auslösen können.

Das folgende Beispiel zeigt einen roten Kreis, der beim Anklicken ein zunächst unsichtbares (blaues) Rechteck innerhalb von 10 Sekunden auf eine Breite von 300 Pixeln animiert. Dabei kommt das SVG-Element animate zum Einsatz. Dem Attribut begin wird der Wert kreis.click zugewiesen, wobei kreis mit dem Wert des id-Attributes vom SVG-Element circle übereinstimmt. Statt click lassen sich auch andere Ereignisse wie mouseover oder mouseout erfassen, was ebenfalls am circle-Element demonstriert wird (Element set mit Farbwechsel rot <––> gelb). Hinweis: Auch auf das Ende einer Aktion kann analog reagiert werden. Dazu steht das Attribut end zur Verfügung.


      <!-- SVG-Codeausschnitt -->

      <circle id="kreis" cx="100" cy="100" r="20" style="fill: #F00">
        <set begin="kreis.mouseover" attributeName="fill" attributeType="CSS"
          to="#FF0"/>
        <set begin="kreis.mouseout" attributeName="fill" attributeType="CSS"
          to="#F00"/>
      </circle>

      <rect x="200" y="80" width="0" height="40"
        style="fill: #00C; visibility: hidden">

        <animate begin="kreis.click" attributeName="visibility" attributeType="CSS"
          from="hidden" to="visible" dur="0.1s" fill="freeze"/>
        <animate begin="kreis.click" attributeName="width" attributeType="XML"
          from="0" to="300" dur="10s" fill="freeze"/>

      </rect>
Die Verwendung von zwei aufeinander folgenden Animationsschritten erwies sich als nötig, da das Rechteck mit der Breite 0 dennoch eine sichtbare blaue Linie zeigte. Deshalb wird erst innerhalb einer Zehntelsekunde die CSS-Eigenschaft visibility auf visible gesetzt und danach das XML-Attribut width angesprochen (vgl. jeweils attributeName bzw. attributeType).


Aktionen ohne Scripts in SVG



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

Weitere Informationen zu Client- und Server-seitigen SVG-Anwendungen sind im Artikel Grafik-Tagwerk im Heft 7/2002 der Zeitschrift Internet Professionell zu finden. Dieser steht freundlicherweise auch als Online-Version bereit.