SVG/Elemente/animateTransform

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

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.

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

Start-Tag: notwendig
End-Tag: ggf. notwendig
<animateTransform />
<animateTransform>
  <!-- Kindelement(e) -->
</animateTransform>
Elternelemente Darf vorkommen in:
grafische Elementengrafische Elementen

Information: grafische Elemente (SVG)

Elemente, die dazu führen, dass etwas gezeichnet wird
use
erlaubte Inhalte

desc, metadata, title

Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Kernattribute
class ID ordnet ein Element einer oder mehreren Klassen zu.
id ID identifiziert ein einziges Element innerhalb eines Dokuments
lang ID identifiziert eine Sprachangabe
style ID CDATA Stilangabe durch Präsentationsattribute
tabindex ID macht Element „antabbbar“
xml:base CDATA Basis-URL
xml:lang Sprachkürzel legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space default, preserve Verhalten gegenüber whitespace)


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