Att animera SVG är lite unikt eftersom det finns tre tydligt olika sätt att närma sig att animera det.
1. Animera med CSS @keyframes
SVG-element kan riktas in och utformas med CSS. Det betyder att du kan använda animering via @keyframes. Så här:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Du kan välja att animera på detta sätt om ...
- Animationen är ganska enkel.
- Du behöver bara animera egenskaper som CSS kan animera.
- Du känner redan till och är bekväm med CSS-animationer.
2. Animera med SMIL
Det finns en syntax för animationer inbyggda direkt i SVG. Här är ett mycket enkelt exempel:
Här är en stor handledning om allt som är SMIL.
Du kan välja att animera på detta sätt om ...
- Du måste animera egenskaper som CSS inte kan, som själva formen.
- Du behöver andra SMIL-specifika funktioner, som att starta en animering när en annan slutar utan att manuellt synkronisera varaktigheter / förseningar. Eller interaktions grejer, som att börja en animering med ett klick.
3. Animering med JavaScript
Med JavaScript har du tillgång till saker som requestAnimationFrame (eller andra loopar), så att du kan animera bara genom att snabbt ändra fastighetsvärden. Det finns också ramar där ute för att arbeta med SVG som vanligtvis har animerade grejer inbyggda. Eller animeringsramar som fungerar med SVG. Som SnapSVG, GreenSock, SVG.js eller Velocity.js.
Här är ett exempel med SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Du kan välja att animera på detta sätt om ...
- Du arbetar i JavaScript ändå, kanske har din animering att göra med data du får med JSON eller liknande.
- Du behöver JavaScript ändå, för du behöver logiken eller matematiken eller något annat som egentligen bara är möjligt där.
- Du är intresserad av att JavaScript löser några buggar åt dig.
- Omfattningen av din animering är ganska stor / komplicerad och du behöver den abstraktion och organisation JavaScript kan tillhandahålla.
Demo
Se pennan tre sätt att animera SVG av Chris Coyier (@chriscoyier) på CodePen.
Påverkar inte hur du slutligen använder SVG dina alternativ?
Det gör det. Om du använder SVG-as- kommer du inte att kunna använda CSS-animationer från ett annat formatmall. Men du är SMIL-animationer kommer att fungera, i vissa webbläsare (när detta skrivs, Chrome ja, Firefox nej). Jag skulle inte bli förvånad om inbäddad CSS i SVG-filer fungerar eller kommer att fungera en dag. JavaScript, förmodligen inte.
Om du använder SVG i en CSS-bakgrundsbild föreställer jag mig att det är en liknande historia som ovan.
Om du använder inline är alla möjligheter öppna för dig.
Om du använder SVG genom en objecteller iframe, måste du bädda in skript / stilar direkt i SVG för att det ska fungera.