SMIL/set

10min

einfach

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

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.

<circle cx="50" cy="50" r="50">
  <animateColor 
    attributeName="fill" 
    values="red; yellow; green;" 
    dur="4s"/>
</circle>

Korrekte Animation mit <animate>

<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.

• animateTransform
• SMIL
  (Übersicht)