transition:draw för SVG-banor
Animera SVG-streck stegvis med draw-övergången.
transition:draw för SVG-banor är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
draw-övergången
Övergången draw animerar SVG-banors linjer genom att gradvis visa dem.
Importera
Den kommer från svelte/transition.
import { draw } from "svelte/transition";Tillämpa på en bana
Koppla den till ett SVG-element av typen <path> med en linje.
<svg viewBox="0 0 100 100">
{#if visible}
<path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
{/if}
</svg>Linje krävs
Banan måste ha en synlig linje. Banor som endast har fyllning kan inte ritas på det här sättet.
Varaktighet och easing
Precis som andra övergångar accepterar den duration, delay och easing.
Användningsområden
Logotyper som visas gradvis, signaturanimeringar, matematiska teckningar och introduktioner till infografik.
Kombinera med fade
Använd in:draw och out:fade för symmetri mellan inpassering och utpassering.
Beräkna längden
Övergången använder internt getTotalLength(). Komplexa banor animeras naturligt.
Animering av flera banor
Sekvensera ritningen av flera banor med delay för att skapa samordnade framvisningar.
{#each paths as p, i}
<path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}Prestanda
Det fungerar smidigt på de flesta enheter, men mycket långa banor kan behöva kortare varaktigheter på mobila enheter.
Webbläsarstöd
Fungerar överallt där SVG- och CSS-animationer stöds, alltså i alla moderna webbläsare.
Snabbkontroll
Vad kräver transition:draw?
Sammanfattning
Använd transition:draw på SVG-banor med en linje för att animera en gradvis uppritning av vektorgrafik.
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
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”transition:draw för SVG-banor” gratis?
Ja – hela texten till ”transition:draw för SVG-banor” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”transition:draw för SVG-banor”?
Animera SVG-streck stegvis med draw-övergången. Ni övar på Sveltejs 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 Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs 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 ”transition:draw för SVG-banor”?
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 Sveltejs Academy-lektionen?
Ja. Varje Sveltejs 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
- transition:fade och transition:fly
- Övergångsparametrar: duration delay easing
- in: och out: för asymmetriska övergångar
- transition:draw för SVG-banor