animate bietet sehr flexible Möglichkeiten
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Für die meisten interessanten Animationen kommt aber der <animate>-Tag in Frage, weil Sie hiermit die Möglichkeit haben, jedes Attribut und jede Eigenschaft im style-Attribut zu manipulieren. Damit können Sie auch Filtereinstellungen und Ähnliches verändern. Der Tag verfügt lediglich über die Universalattribute, deren Anwendung das folgende Beispiel zeigt. Ausgangspunkt dafür ist der Button aus dem letzen Kapitel (siehe unter Filter, Transformationen und Farbverläufe), dessen Schatteneinstellungen durch die Animation verändert werden, sodass es so aussieht, als wenn der Button gedrückt wird. Dazu müssen Sie lediglich einen <animate>-Tag in den Filter <feGaussianBlur> einfügen, der den Schatten für den Button erzeugt.
<?xml version="1.0" standalone="no"?>
...
<svg width="300" height="800">
<defs>
<g id="Bttn">
<desc>Der Button</desc>
<circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf)"/>
<ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>
</g>
<filter id="SVGObjekt" filterUnits="userSpaceOnUse" width="150" heigth="150">
<feGaussianBlur id="Schatten" in="SourceAlpha" stdDeviation="12 6" result="Schatten">
<animate attributeName="stdDeviation" begin="2s" dur="0.5s" values="6,3"/>
</feGaussianBlur>
<feImage xlink:href="#Bttn" result="Button"/>
<feMerge>
<feMergeNode in="Schatten"/>
<feMergeNode in="Button"/>
</feMerge>
</filter>
<desc>Es folgen die Farbverläufe</desc>
<radialGradient id="runderVerlauf" cx="50%" cy="90%" r="60%" fx="60%" fy="80%">
<stop offset="0%" style="stop-color:rgb(255,150,150);stop-opacity:1"/>
<stop offset="1%" style="stop-color:rgb(255,128,128);stop-opacity:1"/>
<stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</radialGradient>
<linearGradient id="linearerVerlauf" gradientTransform="rotate(90)">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="90%" style="stop-color:rgb(255,1,1);stop-opacity:1"/>
</linearGradient>
</defs>
<g transform="translate(0,0)">
<g transform="translate(20,20), scale(0.7)" style="filter:url(#SVGObjekt)" id="roterButton">
<desc>Der Button</desc>
<circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf)"/>
<ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>
</g>
</g>
</svg>
Die Animation innerhalb des Filter bewirkt, dass nach 2 Sekunden (begin="2s") der Schatten des Buttons verkleinert wird. Das wird über die values-Werteliste der Werte des Attributs stdDeviation auf 6 für die x-Achse und 3 für die y-Achse gesetzt (values="6,3"). Diese Einstellung wird durch Angabe von dur="0.5" eine halbe Sekunde behalten und dann wieder der Ausgangszustand hergestellt. Die folgende Abbildung zeigt die beiden Zustände des Buttons.
Abbildung: Links der Button im Normalzustand, rechts »gedrückt«.
Sie können mit dem Tag <animation> aber nicht nur Attribute von Tags ändern, sondern auch alle Einstellungen, die Sie über Stylesheets oder das style-Attribut eines Elements vorgenommen haben. Dies zeigt das nächste Beispiel. Es ändert die Deckkraft eines Textes von 0 auf 0.7 und zurück zu 0. Die ganze Animation dauert eine Minute, danach wird die Deckkraft in einer weiteren Animation auf 0.5 gesetzt und beibehalten. Dazu müssen Sie lediglich den <text>-Tag wie folgt ergänzen:
<text id="unterschrift" x="244" y="90" style="font-family:'Arial Black',Helvetica;font-size:39;stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.5;fill:red">Scalable Vector Graphic
<animate attributeType="CSS" attributeName="fill-opacity" values="0;0.1;0.2;0.3;0.4;0.5;0.6;0.7;0.6;0.5;0.4;0.3;0.2;0.1;0" dur="10s" repeatDur="60" fill="freeze"/>
<animate attributeType="CSS" attributeName="fill-opacity" begin="60s" values="0.5" dur="1s" fill="freeze"/>
</text>
| Tipp der data2type-Redaktion: Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de