Även om animering av SVG med CSS kan vara bekvämare för den genomsnittliga frontpersonen har SVG ett annat sätt att göra animering inbyggd direkt i SVG-syntaxen. Det här är precis vad vi kortfattat täcker i den här videon, men om du vill ha en komplett referensguide kan du definitivt kolla in A Guide to SVG Animations (SMIL) av Sara Soueidan här på CSS-Tricks.
SMIL står för Synchronized Multimedia Integration Language. Som jag förstår är det en "sak" för sig själv som råkar vara inbyggd i SVG. Men SVG har några av sina egna SMIL-liknande tillägg. Jag ska bara hänvisa till allt som SMIL även om jag är säker på att jag är tekniskt fel ibland.
För mycket enkla animationer spelar det ingen roll om du gör det i SMIL eller CSS, det kommer att göra samma sak på ungefär samma svårighetsgrad. Vissa saker kan till och med vara enklare i CSS. Men här är några saker där SMIL är vägen att gå:
- Du måste animera något som CSS inte kan röra vid. Som formen på en polygon eller väg.
- Du vill använda händelser för att påverka animationen, som en
clickellermouseovereller något. - Du vill göra additiva animationer som att animera var du än befinner dig ytterligare x pixlar.
- Du vill ha animationer som är direkt relaterade till andra animationer, till exempel när den här animationen är klar, starta nästa animation (utan att manuellt manipulera varaktigheter).
- Jag är säker på att det finns fler.
Syntaxen känns skrämmande till en början, men det är riktigt ganska enkelt lovar jag. Här är ett grundläggande exempel:
Se Pen jAipI av Chris Coyier (@chriscoyier) på CodePen.
"Form morphing" är verkligen super unik med SMIL, så här är ett bättre exempel än det konstiga vi gjorde i videon:
Se Pen Shape Morph Button av Chris Coyier (@chriscoyier) på CodePen.
I den demonstrationen hanteras händelserna av JavaScript istället för SMIL. Bara trevligt att veta att du kan göra det också. SMIL-händelseutlösare är coola, men då måste det som måste klickas vara i det SVG snarare än bara någon annanstans i DOM.