attributeType
Voreinstellung: auto.
Mit dem Attribut attributeType geben Sie den Typ
der Eigenschaft bzw. des Attributs an: der voreingestellte Wert auto
bewirkt, dass der user agent selbst ermittelt ob es sich um eine
CSS-Eigenschaft oder um ein XML-Attribut (SVG ist eine XML-basierte Sprache !)
handelt. Die beiden anderen möglichen Werte für
attributeType sind daher
CSS und XML.
attributeName
Voreinstellung: keine.
Mit der Eigenschaft attributName legen
Sie die Eigenschaft bzw. das Attribut im Zielelement fest, die verändert werden
soll. Möglicher Wert ist eine der im Zielelement akzeptierten
Eigenschaften bzw. Attribute.
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 xmlns="http://www.w3.org/2000/svg" width="200" height="200"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>animAttributeAttrs</title>
<desc>Attribute/Eigenschaften für die Zielbestimmung</desc>
<defs>
<symbol id="smilie">
<desc>ein Symbol-Smilie</desc>
<circle cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<circle cx="15" cy="15" r="2"
fill="black" stroke="black" />
<circle cx="25" cy="15" r="2"
fill="black" stroke="black" />
<line x1="20" y1="18" x2="20" y2="23"
stroke="black" stroke-width="2" />
<path id="mund" d="M 13 30 A 5 3 0 0 1 27 30"
stroke="black" fill="none" stroke-width="2" />
</symbol>
</defs>
<use xlink:href="#smilie" transform="scale(5)" />
<animate xlink:href="#mund"
attributeType="XML" attributeName="d"
begin="1" dur="4"
from="M 13 30 A 5 3 0 0 1 27 30"
to="M 13 26 A 5 3 0 0 0 27 26"
fill="freeze" />
</svg>
Die Animation im obigen Beispiel wird durch die Veränderung der Pfadwerte
eines Pfades "mund" erzeugt.
Die y-Koordinaten der Start- und Endpunkte dieser elliptischen
Bogenkurve werden verringert. Außerdem wird der Wert für die Zeichenrichtung
auf 0 geändert, d.h. die Kurve wird jetzt entgegen dem Uhrzeigersinn gezeichnet.
Dieser Pfad mit der ID "mund" wird durch die
Referenzierung im Attribut xlink:href,
das im Element animate gesetzt wird,
zum Zielelement der Animation.
Durch attributeName wird das
Attribut d im Zielelement ausgewählt.
Mit attributeType wird die Art dieser Eigenschaft angegeben:
XML. (d ist keine CSS-Eigenschaft, sondern
gehört zum Sprachumfang von SVG. SVG basiert wiederum auf XML.)
Es ist jedoch meist nicht notwendig dieses Attribut
zu verwenden, da die Voreinstellung auto den Attributtyp
eigenständig ermittelt.
Die Animation wird nach 1 Sekunde gestartet und
läuft 4 Sekunden, wobei das Endbild der Animation am Bildschirm
stehen bleibt .. Näheres dazu in den folgenden Unterkapiteln.
|