SVG animeren met CSS
Hieronder zie je een vierkant met afgeronde hoeken. Het plaatje is gemaakt met SVG.
Als je op tikt of er met de muis overheen gaat, veranderen de kleuren. Op deze pagina wordt beschreven hoe je een SVG-plaatje
kunt animeren met CSS.
Er zijn drie manieren om SVG-plaatjes te laten bewegen.
- Met de SVG-technologie zelf (SMIL)
- Met JavaScript
- Met CSS transition of @keyframes
- De SVG-standaard bevat een set tags waarmee je SVG-plaatjes kunt animeren. Deze technologie heet SMIL (Synchronized Multimedia Integration Language).
- Animeren met SMIL lijkt aantrekkelijk, maar er zit een addertje onder het gras: In Chrome (v.a. versie 45) en andere browsers
is SMIL aangemerkt als deprecated (afgeraden). Het zal op enig moment wel uit de standaard verdwijnen.
- JavaScript gebruik je als je dingen wilt laten bewegen en dat met CSS lastig is of helemaal niet gaat. Denk hierbij aan de vorm van een element veranderen of aan het starten van een beweging op een muisklik.
- Om met JavaScript te animeren gebruik je functies zoals requestAnimationFrame() om snel eigenschappen te wijzigen.
Het kan echter veel eenvoudiger door een JavaScript-platform in te zetten dat speciaal is gericht op het werken met SVG. Daar
zijn er veel van, bijvoorbeeld: Snap.svg. De leercurve van dit soort platforms
is helaas nogal steil. Ja past het dus niet zomaar even toe, je moet echt de tijd nemen om het te leren.
- Voor eenvoudige animaties, zoals op deze pagina, kun je gewoon de bekende CSS-aanpak gebruiken met transition, animate en @keyframes.
- Hieronder staat de code van het voorbeeld.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.mySVG {
width:100px;
margin:10px auto 10px auto;
}
.demo {
fill:#d00;
stroke:#fee16e;
stroke-width:2;
opacity:0.5;
transition:.8s ease-out;
}
.demo:hover {
fill:#003;
stroke-width:8;
opacity:0.8;
}
</style>
(Zet dit in de <BODY> op de plaats waar het plaatje moet verschijnen).
<div class="mySVG">
<svg viewBox="0 0 100 100">
<rect class="demo" x="10" y="10" rx="20" ry="20"
width="80" height="80" />
</svg>
</div>
Opmerking:
Een meer complexe manier om SVG te animeren vind je in het item SVG animeren met vivus.js.
