Animera SVG med CSS och SMIL
Lägg till rörelse i SVG-element med CSS-övergångar och SMIL
Animera SVG med CSS och SMIL är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
CSS-övergångar på SVG
SVG:s presentationsattribut (fill, stroke, opacity, transform) kan animeras med CSS-övergångar. Lägg till en klass och definiera övergången: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS-övergångar fungerar på samma sätt på SVG-element som på andra element.
CSS-nyckelbildsanimationer på SVG
Tillämpa @keyframes på SVG-element: animera stroke-dashoffset för effekter där en path ritas, opacity för intoning och transform för förflyttning och rotation. Samma animationssyntax som används för HTML-element gäller för SVG-element utan ändringar.
@keyframes draw {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }Riteffekt för path
Tekniken med stroke-dasharray och stroke-dashoffset simulerar att en path ritas: ange dasharray till samma värde som path-längden, ange dashoffset till path-längden (osynlig) och animera sedan dashoffset till 0. Linjen ser då ut att rita sig själv från början till slut.
Hämta path-längden
path.getTotalLength() returnerar path-längden i SVG:s användarenheter. Använd värdet för både stroke-dasharray och det inledande stroke-dashoffset. Då fungerar animeringen korrekt oavsett pathens komplexitet eller längd.
CSS transform på SVG
Moderna webbläsare stöder CSS transform på SVG-element. Standardvärdet för transform-origin är det övre vänstra hörnet i SVG-element – inte elementets centrum som i HTML. Ange transform-box: fill-box för att göra transform-origin relativ till elementets begränsningsram.
.spinner {
transform-box: fill-box;
transform-origin: center;
animation: rotate 1s linear infinite;
}SMIL-animationer
SMIL (Synchronized Multimedia Integration Language) är SVG:s inbyggda animationssystem. Elementet animate ändrar attributvärden över tid. SMIL kräver varken JavaScript eller CSS – animeringar är helt deklarativa i SVG-markupen.
<circle r="20">
<animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>animateTransform
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> roterar ett element kring en angiven mittpunkt med SMIL-syntax.
animateMotion
<animateMotion> flyttar ett element längs en SVG-path. Referera till en path med mpath eller lägg in path-data direkt. Elementet följer automatiskt path-kurvan – användbart för komplexa rörelsebanor utan manuell koordinatberäkning.
Avvägningar mellan CSS och SMIL
CSS-animeringar: stöds i alla moderna webbläsare, integreras med CSS-kaskaden och är enklare att styra via JavaScript (pause, reverse). SMIL: är självförsörjande i SVG-markupen, fungerar i statiska SVG-filer utan åtkomst till CSS och är deklarativt och uttrycksfullt för animering längs en path.
Formövergångar för SVG-paths
Animera mellan två path-former: path-erna måste ha samma antal kommandon och en kompatibel struktur. CSS-animeringen animerar egenskapen d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } för inbyggda CSS-formövergångar för paths.
Tillgänglighet för SVG-animationer
Lägg till mediafrågan prefers-reduced-motion för att inaktivera eller förenkla SVG-animeringar för användare som upplever rörelse som obehaglig. Dekorativa animeringar bör inaktiveras helt; meningsbärande animeringar, till exempel laddningstillstånd, bör förenklas i stället för att stoppas.
Kunskapskontroll
Hur skapar tekniken med stroke-dasharray och stroke-dashoffset en animering där en path ritas?
Sammanfattning
SVG-animering använder CSS-övergångar och nyckelbilder för egenskapsbaserade effekter, tekniken med stroke-dasharray/dashoffset för att rita paths, SMIL animate/animateTransform/animateMotion för deklarativ animering i SVG och prefers-reduced-motion för tillgänglighet. CSS och SMIL kompletterar varandra – välj utifrån om SVG:n behöver integreras med CSS-kaskaden eller kunna användas fristående.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Animera SVG med CSS och SMIL” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Animera SVG med CSS och SMIL”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Animera SVG med CSS och SMIL”?
Lägg till rörelse i SVG-element med CSS-övergångar och SMIL Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Animera SVG med CSS och SMIL”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Inline-SVG jämfört med img och object
- Grundläggande SVG-former: rect circle path
- SVG viewBox och responsiv skalning
- Animera SVG med CSS och SMIL