Animering av SVG med CSS og SMIL
Legg til bevegelse i SVG-elementer med CSS-overganger og SMIL
Animering av SVG med CSS og SMIL er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
CSS-overganger på SVG
SVG-presentasjonsattributter (fill, stroke, opacity, transform) kan animeres med CSS-overganger. Legg til en klasse og definer overgangen: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS-overganger fungerer på samme måte på SVG-elementer.
CSS-nøkkelbildeanimasjoner på SVG
Bruk @keyframes på SVG-elementer: animer stroke-dashoffset for effekter som tegner opp en path, opacity for innfasing og transform for bevegelse og rotasjon. Den samme animasjonssyntaksen som brukes for HTML-elementer, gjelder for SVG-elementer uten endringer.
@keyframes draw {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }Effekt for opptegning av path
Teknikken med stroke-dasharray og stroke-dashoffset simulerer opptegning av en path: sett dasharray lik path-lengden, sett dashoffset lik path-lengden slik at path-en blir usynlig, og animer deretter dashoffset til 0. Streken ser da ut til å tegne seg selv fra start til slutt.
Hente lengden på en path
path.getTotalLength() returnerer lengden på path-en i SVG-brukerenheter. Bruk denne verdien både for stroke-dasharray og den opprinnelige stroke-dashoffset-verdien. Dette sikrer at animasjonen fungerer riktig uavhengig av hvor kompleks eller lang path-en er.
CSS-transformasjon på SVG
Moderne nettlesere støtter CSS-transformasjon på SVG-elementer. transform-origin er som standard satt til øverste venstre hjørne i SVG-elementer — ikke til midtpunktet, slik det er i HTML. Angi transform-box: fill-box for å gjøre transform-origin relativ til elementets avgrensningsboks.
.spinner {
transform-box: fill-box;
transform-origin: center;
animation: rotate 1s linear infinite;
}SMIL-animasjoner
SMIL (Synchronized Multimedia Integration Language) er SVGs innebygde animasjonssystem. animate-elementet endrer attributtverdier over tid. SMIL krever ikke JavaScript eller CSS — animasjonene er fullstendig deklarative og ligger i SVG-markeringen.
<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 rundt et angitt sentrumspunkt ved hjelp av SMIL-syntaks.
animateMotion
<animateMotion> flytter et element langs en SVG-path. Referer til en path med mpath, eller legg inn path-data direkte. Elementet følger automatisk kurven til path-en — nyttig for komplekse bevegelsesbaner uten manuell beregning av koordinater.
Avveininger mellom CSS og SMIL
CSS-animasjoner støttes i alle moderne nettlesere, integreres med CSS-kaskaden og er enklere å styre med JavaScript, for eksempel ved å sette dem på pause eller reversere dem. SMIL er selvstendig i SVG-markeringen, fungerer i statiske SVG-filer uten tilgang til CSS, og er deklarativt og uttrykksfullt for animasjon som følger en path.
Morphing av SVG-path-er
Animer mellom to path-former: Path-ene må ha samme antall kommandoer og en kompatibel struktur. CSS-animasjonen animerer egenskapen d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } for innebygd morphing av path-er med CSS.
Tilgjengelighet for SVG-animasjoner
Legg til media query-en prefers-reduced-motion for å deaktivere eller forenkle SVG-animasjoner for brukere som opplever bevegelse som ubehagelig. Dekorative animasjoner bør deaktiveres helt, mens meningsfulle animasjoner, for eksempel lastetilstander, bør forenkles i stedet for å stoppes.
Kunnskapssjekk
Hvordan skaper teknikken med stroke-dasharray og stroke-dashoffset en animasjon som tegner opp en path?
Sammendrag
SVG-animasjon bruker CSS-overganger og nøkkelbilder for egenskapsbaserte effekter, stroke-dasharray/dashoffset-teknikken for opptegning av path-er, SMIL animate/animateTransform/animateMotion for deklarativ animasjon i SVG, og prefers-reduced-motion for tilgjengelighet. CSS og SMIL utfyller hverandre — velg ut fra om SVG-en trenger integrasjon med CSS-kaskaden eller skal kunne brukes som en frittstående fil.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Animering av SVG med CSS og SMIL» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Animering av SVG med CSS og SMIL», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Animering av SVG med CSS og SMIL»?
Legg til bevegelse i SVG-elementer med CSS-overganger og SMIL Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Animering av SVG med CSS og SMIL»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Innebygd SVG kontra img og object
- Grunnleggende SVG-former: rect circle path
- SVG viewBox og responsiv skalering
- Animering av SVG med CSS og SMIL