transition:draw til SVG-stier
Animér SVG-streger trinvist med draw-overgangen
transition:draw til SVG-stier er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
draw-transitionen
draw-transitionen animerer SVG-stregforløb ved gradvist at gøre dem synlige.
Importér
Den kommer fra svelte/transition.
import { draw } from "svelte/transition";Anvend på en path
Tilknyt den til et SVG-<path>-element med en streg.
<svg viewBox="0 0 100 100">
{#if visible}
<path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
{/if}
</svg>Streg er påkrævet
Path-elementet skal have en synlig streg. Paths, der kun har en fyldning, kan ikke tegnes.
Varighed og easing
Ligesom andre transitioner accepterer den duration, delay og easing.
Anvendelsesområder
Logoafsløringer, signaturanimeringer, matematiske tegninger og introduktioner til infografikker.
Kombinér med fade
Brug in:draw og out:fade for symmetri mellem indgang og udgang.
Beregning af længde
Transitionen bruger internt getTotalLength(). Komplekse paths animeres naturligt.
Animation af flere paths
Sekvensér tegningen af flere paths ved hjælp af delay for koordinerede afsløringer.
{#each paths as p, i}
<path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}Ydeevne
Det fungerer flydende på de fleste enheder; meget lange paths kan kræve kortere varigheder på mobilen.
Browserunderstøttelse
Fungerer overalt, hvor SVG- og CSS-animationer understøttes (alle moderne browsere).
Hurtigt tjek
Hvad kræver transition:draw?
Opsummering
Brug transition:draw på SVG-paths med en streg for at animere den gradvise tegning af vektorgrafik.
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
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “transition:draw til SVG-stier” gratis?
Ja — hele teksten til “transition:draw til SVG-stier” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “transition:draw til SVG-stier”?
Animér SVG-streger trinvist med draw-overgangen Du øver dig i Sveltejs 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å Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs 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 “transition:draw til SVG-stier”?
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 Sveltejs Academy-lektion?
Ja. Alle Sveltejs 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
- transition:fade og transition:fly
- Overgangsparametre: duration delay easing
- in: og out: til asymmetriske overgange
- transition:draw til SVG-stier