23: SVG mit SMIL animieren

Auch wenn das Animieren von SVG mit CSS für den durchschnittlichen Front-End-Entwickler vielleicht komfortabler ist, verfügt SVG über eine weitere eingebaute Möglichkeit zur Animation, die direkt in der SVG-Syntax selbst enthalten ist. Genau das behandeln wir kurz in diesem Video. Wenn Sie jedoch eine vollständige Referenz wünschen, sollten Sie sich unbedingt A Guide to SVG Animations (SMIL) von Sara Soueidan hier auf CSS-Tricks ansehen.

SMIL steht für Synchronized Multimedia Integration Language. Soweit ich weiß, ist das ein "Ding" für sich, das in SVG integriert ist. Aber SVG hat einige eigene SMIL-ähnliche Ergänzungen. Ich werde es einfach alles SMIL nennen, auch wenn ich sicher bin, dass ich technisch gesehen manchmal falsch liege.

Für sehr einfache Animationen spielt es keine große Rolle, ob Sie es in SMIL oder CSS machen, es wird dasselbe Ergebnis mit ungefähr demselben Schwierigkeitsgrad erzielen. Manche Dinge sind in CSS vielleicht sogar einfacher. Aber hier sind einige Dinge, bei denen SMIL die beste Wahl ist

• Sie müssen etwas animieren, das CSS nicht beeinflussen kann. Wie die Form eines Polygons oder Pfads.
• Sie möchten Ereignisse nutzen, um die Animation zu beeinflussen, z. B. `click` oder `mouseover` oder etwas Ähnliches.
• Sie möchten additive Animationen durchführen, z. B. von Ihrem aktuellen Punkt aus um weitere X Pixel animieren.
• Sie möchten Animationen haben, die sich direkt auf andere Animationen beziehen, z. B. wenn diese Animation endet, starten Sie die nächste Animation (ohne manuell die Dauer zu manipulieren).
• Ich bin sicher, es gibt noch mehr.

Die Syntax wirkt zunächst einschüchternd, aber sie ist wirklich ziemlich einfach, ich verspreche es. Hier ist ein grundlegendes Beispiel

<svg>
  
  <rect x="5" y="5" width="50" height="50">
    
    <animate attributeName="width" to="75" dur="2s"></animate>
    
    <animate attributeName="y" to="25" dur="2s"></animate>
    
    <animate attributeName="fill" to="red" dur="2s"></animate>
    
  </rect>
  
</svg>

Siehe den Pen jAipI von Chris Coyier (@chriscoyier) auf CodePen.

Die "Shape Morphing"-Funktion ist mit SMIL wirklich einzigartig, daher hier ein besseres Beispiel als das seltsame, das wir im Video hatten

Siehe den Pen Shape Morph Button von Chris Coyier (@chriscoyier) auf CodePen.

In dieser Demo werden die Ereignisse von JavaScript anstelle von SMIL behandelt. Es ist nur gut zu wissen, dass man das auch tun kann. SMIL-Ereignisauslöser sind cool, aber dann muss das Element, auf das geklickt werden soll, in diesem SVG und nicht irgendwo anders im DOM sein.