SMIL/set

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• SVG

Mit dem set-Element können Sie zwischen einem Anfangs- und einem Endzustand umschalten, ein fließender Übergang wie bei animate ist jedoch nicht möglich.

Da als Anfangszustand immer der Anfangswert des angesprochenen Attributs benutzt wird, benötigen Sie kein from-Attribut und am Ende der Animation wird der Endzustand auch ohne fill="freeze" dargestellt.

sprunghafte Animation mit set ansehen …
	<ellipse cx="240" cy="100" rx="200" ry="70">
		<set 
			attributeName="stroke-width" 
			to="10" 
			begin="1s"
		/>
    </ellipse>
 
	<text x="10" y="240">&lt;set attributeName="stroke-width" to="10" begin="1s"/>
		<set 
			attributeName="fill" 
			to="black" 
			begin="1.5s"
		/>
    <text>
Die Ellipse erhält nach 1 Sekunde einen blauen Rand. Kurz danach erscheint der Text.
Empfehlung: Anstelle des set-Elements können Sie auch das animate-Element im calcMode="discrete" verwenden.

animateColor[Bearbeiten]

Für Farbtransformationen wurde explizit das animateColor-Element geschaffen. Da es aber gegenüber dem animate-Element keinerlei Vorteile hat, wurde es in SVG1.1 deprecated und ist somit obsolet.[1]

  • Achtung
<circle cx="50" cy="50" r="50">
  <animateColor 
    attributeName="fill" 
    values="red; yellow; green;" 
    dur="4s"/>
</circle>
<circle cx="50" cy="50" r="50">
  <animate
    attributeName="fill" 
    values="red; yellow; green;" 
    dur="4s"/>
</circle>
Empfehlung: Verwenden Sie für Farbänderungen ebenfalls animate, da animateColor nicht (mehr) unterstützt wird.


  1. MDN: animateColor