SVG/Element/animateTransform
Aus SELFHTML-Wiki
Das animateTransform-Element animiert SVG-Transformationen.
Mit animate und der Angabe von attributeName können Sie beliebige XML-Attribute animieren. Bei transform ist dies nicht möglich, da neben den Werten an sich auch noch der Typ der Transformation angegeben werden muss.
- Syntax
- Start-Tag: notwendig
- End-Tag: ggf. notwendig
- Elternelemente
- Darf vorkommen in:
grafische Elementen und use - erlaubte Inhalte
- desc, metadata, title
Name | Inhalt | Standardwert | Bedeutung |
---|---|---|---|
attributeName | transform | Pflichtangabe | |
by | CDATA | ||
from | NUMBER | Anfangswert des zu animierenden Attributs | |
to | NUMBER | Endwert des animierten Attributs | |
type | translate scale rotate skewX, skewY |
Typ der Transformation |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Beispiel
<ellipse cx="100" cy="100" rx="50" ry="50" fill="#c32e04">
<animateTransform
attributeName="transform"
type="scale"
from="1" to="1.5"
dur="4s"
fill="freeze"
/>
</ellipse>
Beachten Sie: Vergessen Sie trotzdem nicht:
attributeName:transform;
.Empfehlung: Normalerweise überschreiben sich animierte Transformationen. Um mehrere Transformationen gleichzeitig zu animieren, müssen Sie die Eigenschaft additive="sum" setzen.
Siehe auch
Weblinks
Grundformen
- Struktur und Gruppierungen
- Metadaten
- Text
- weitere Elemente
- Animationen
- animate
-
animateColor - animateMotion
- animateTransform
- mpath
- set
- Beschneidungen und Masken
- Filter
- Muster und Verläufe