transition:draw für SVG-Pfade
Animieren Sie SVG-Linien schrittweise mit dem Draw-Übergang.
transition:draw für SVG-Pfade ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Die draw-Transition
Die draw-Transition animiert die Konturen von SVG-Pfaden, indem sie diese schrittweise sichtbar macht.
Import
Sie wird aus svelte/transition importiert.
import { draw } from "svelte/transition";Auf einen Pfad anwenden
Verknüpfen Sie sie mit einem SVG-<path>-Element, das einen Stroke besitzt.
<svg viewBox="0 0 100 100">
{#if visible}
<path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
{/if}
</svg>Stroke erforderlich
Der Pfad muss einen sichtbaren Stroke besitzen. Pfade, die nur eine Füllung haben, können nicht gezeichnet werden.
Dauer und Easing
Wie andere Transitions akzeptiert sie duration, delay und easing.
Anwendungsfälle
Logo-Einblendungen, Signaturanimationen, mathematische Zeichnungen und Intros für Infografiken.
Mit Fade kombinieren
Verwenden Sie in:draw und out:fade für symmetrische Ein- und Ausblendungen.
Länge berechnen
Die Transition verwendet intern getTotalLength(). Komplexe Pfade werden auf natürliche Weise animiert.
Animation mehrerer Pfade
Sequenzieren Sie Zeichnungen auf mehreren Pfaden mit delay, um aufeinander abgestimmte Einblendungen zu erzeugen.
{#each paths as p, i}
<path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}Performance
Auf den meisten Geräten läuft sie flüssig; bei sehr langen Pfaden sind auf Mobilgeräten möglicherweise kürzere Dauern erforderlich.
Browserunterstützung
Funktioniert überall dort, wo SVG- und CSS-Animationen unterstützt werden, also in allen modernen Browsern.
Kurze Prüfung
Was erfordert transition:draw?
Zusammenfassung
Verwenden Sie transition:draw auf SVG-Pfaden mit einem Stroke, um das schrittweise Zeichnen von Vektorgrafiken zu animieren.
Häufig gestellte Fragen
Ist die Lektion „transition:draw für SVG-Pfade“ kostenlos?
Ja — der vollständige Text von „transition:draw für SVG-Pfade“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „transition:draw für SVG-Pfade“?
Animieren Sie SVG-Linien schrittweise mit dem Draw-Übergang. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „transition:draw für SVG-Pfade“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- transition:fade und transition:fly
- Übergangsparameter: duration delay easing
- in: und out: für asymmetrische Übergänge
- transition:draw für SVG-Pfade