SVG/Attribut/fill (Animation)

Der Begriff fill ist mehrdeutig.
Neben dem fill-Attribut für SMIL-Animation gibt es noch das gleichnamige

• SVG-Attribut fill zum farbigen Füllen von Formen
• die JavaScript Web Animations API-Eigenschaft fill
  die entsprechende CSS-Eigenschaft heißt: animation-fill-mode.

Das fill-Attribut legt fest, wie das Objekt nach Ablauf der SMIL-Animation dargestellt werden soll:

Erlaubte Werte

• remove: Objekt wird in den Ursprungszustand versetzt
• freeze: Ende der Animation wird dargestellt

Standardwert

remove

anwendbar auf

animate, animateMotion

Präsentationsattribut

nein

mit CSS animierbar

nein

Beispiel

<rect x="35" y="60" height="15" width="0">
  attributeName="width"
  to="75"
  dur="6s"
  begin="2s"
  fill="freeze" />
</rect>

Am Ende der Animation bleibt die Breite auf dem Endwert von 75 stehen, anstatt zum Ausgangswert zurückzukehren.

Siehe auch

• SMIL

Weblinks

Spezifikation (W3C): Timing attributes