SVG/Attribute/fill (Animation)

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

Der Titel dieses Artikels 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 Animation dargestellt werden soll:

erlaubte Werte
  • remove: Objekt wird in den Ursprungszustand versetzt
  • freeze: Ende der Animation wird dargestellt
default-Wert remove
erlaubt in animate, animateMotion
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

Weblinks

Spezifikation (W3C): Timing attributes

Achtung: Der Sortierungsschlüssel „Fill“ überschreibt den vorher verwendeten Schlüssel „Fill (Animation)“.