Animering af SVG med CSS og SMIL
Tilføj bevægelse til SVG-elementer med CSS-overgange og SMIL
Animering af SVG med CSS og SMIL er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
CSS-overgange på SVG
SVG-præsentationsattributter (fill, stroke, opacity, transform) kan animeres med CSS-overgange. Tilføj en klasse, og definer overgangen: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS-overgange fungerer på samme måde på SVG-elementer.
CSS-keyframeanimationer på SVG
Anvend @keyframes på SVG-elementer: animér stroke-dashoffset for effekter, hvor en sti tegnes, opacity for indtoning og transform for bevægelse og rotation. Den samme animationssyntaks, som bruges til HTML-elementer, gælder for SVG-elementer uden ændringer.
@keyframes draw {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }Effekt til tegning af stier
Teknikken med stroke-dasharray og stroke-dashoffset simulerer tegning af en sti: Sæt dasharray lig med stilængden, sæt dashoffset til stilængden (usynlig), og animér derefter dashoffset til 0. Stregen ser ud til at tegne sig selv fra start til slut.
Hentning af stilængde
path.getTotalLength() returnerer stiens længde i SVG-brugerenheder. Brug denne værdi til både stroke-dasharray og den indledende stroke-dashoffset. Det sikrer, at animationen fungerer korrekt uanset stiens kompleksitet eller længde.
CSS-transform på SVG
Moderne browsere understøtter CSS-transform på SVG-elementer. transform-origin er som standard placeret i SVG-elementets øverste venstre hjørne — ikke i elementets centrum som i HTML. Angiv transform-box: fill-box for at gøre transform-origin relativ til elementets afgrænsningsboks.
.spinner {
transform-box: fill-box;
transform-origin: center;
animation: rotate 1s linear infinite;
}SMIL-animationer
SMIL (Synchronized Multimedia Integration Language) er SVG's indbyggede animationssystem. Animate-elementet ændrer attributværdier over tid. SMIL kræver hverken JavaScript eller CSS — animationerne er fuldt deklarative i SVG-opmærkningen.
<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"> roterer et element omkring et angivet centrumspunkt ved hjælp af SMIL-syntaks.
animateMotion
<animateMotion> flytter et element langs en SVG-sti. Referér til en sti med mpath eller indlejrede stidata. Elementet følger automatisk stiens kurve — nyttigt til komplekse bevægelsesstier uden manuel beregning af koordinater.
Afvejning mellem CSS og SMIL
CSS-animationer: understøttes i alle moderne browsere, er integreret i CSS-kaskaden og er nemmere at styre via JavaScript (sætte på pause, afspille baglæns). SMIL: er selvstændigt indlejret i SVG-opmærkningen, fungerer i statiske SVG-filer uden adgang til CSS og er deklarativt og udtryksfuldt til animationer, der følger stier.
Formskift mellem SVG-stier
Animér mellem to sti-former: Stierne skal have samme antal kommandoer og en kompatibel struktur. CSS-animationen animerer egenskaben d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } til indbygget formskift af stier med CSS.
Tilgængelighed ved SVG-animation
Tilføj medieforespørgslen prefers-reduced-motion for at deaktivere eller forenkle SVG-animationer for brugere, der synes, at bevægelse er ubehagelig. Dekorative animationer bør deaktiveres helt, mens meningsfulde animationer, f.eks. indlæsningstilstande, bør forenkles i stedet for at blive stoppet.
Videnstjek
Hvordan skaber teknikken med stroke-dasharray og stroke-dashoffset en animation, hvor en sti tegnes?
Opsummering
SVG-animation bruger CSS-overgange og keyframes til egenskabsbaserede effekter, teknikken med stroke-dasharray og dashoffset til tegning af stier, SMIL animate/animateTransform/animateMotion til deklarativ animation i SVG samt prefers-reduced-motion af hensyn til tilgængeligheden. CSS og SMIL supplerer hinanden — vælg ud fra, om SVG'en skal integreres i CSS-kaskaden eller kunne bruges som en selvstændig fil.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Animering af SVG med CSS og SMIL” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Animering af SVG med CSS og SMIL”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Animering af SVG med CSS og SMIL”?
Tilføj bevægelse til SVG-elementer med CSS-overgange og SMIL Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Animering af SVG med CSS og SMIL”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Inline-SVG kontra img og object
- Grundlæggende SVG-figurer: rect circle path
- SVG viewBox og responsiv skalering
- Animering af SVG med CSS og SMIL