transition:draw untuk Jalur SVG
Animasikan goresan SVG secara bertahap dengan transisi draw.
transition:draw untuk Jalur SVG adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Transisi draw
Transisi draw menganimasikan goresan jalur SVG dengan menampilkannya secara bertahap.
Impor
Transisi ini berasal dari svelte/transition.
import { draw } from "svelte/transition";Terapkan pada Path
Terapkan pada elemen SVG <path> yang memiliki goresan.
<svg viewBox="0 0 100 100">
{#if visible}
<path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
{/if}
</svg>Goresan Wajib
Path harus memiliki goresan yang terlihat. Path yang hanya memiliki isian tidak dapat digambar.
Durasi dan Penghalusan
Seperti transisi lainnya, transisi ini menerima duration, delay, dan easing.
Kasus Penggunaan
Kemunculan logo, animasi tanda tangan, gambar matematika, dan pembuka infografik.
Gabungkan dengan Fade
Gunakan in:draw dan out:fade untuk perbedaan simetris antara masuk dan keluar.
Menghitung Panjang
Transisi ini menggunakan getTotalLength() secara internal. Path yang kompleks dapat dianimasikan secara alami.
Animasi Multi-Path
Atur penggambaran berurutan pada beberapa path menggunakan delay untuk menampilkan gambar secara terkoordinasi.
{#each paths as p, i}
<path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}Performa
Berjalan mulus di sebagian besar perangkat; path yang sangat panjang mungkin memerlukan durasi lebih singkat pada perangkat seluler.
Dukungan Peramban
Berfungsi di semua tempat yang mendukung animasi SVG dan CSS (semua peramban modern).
Pemeriksaan Singkat
Apa yang diperlukan oleh transition:draw?
Ringkasan
Gunakan transition:draw pada path SVG dengan goresan untuk menganimasikan penggambaran grafik vektor secara bertahap.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “transition:draw untuk Jalur SVG” gratis?
Ya — teks lengkap “transition:draw untuk Jalur SVG” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “transition:draw untuk Jalur SVG”?
Animasikan goresan SVG secara bertahap dengan transisi draw. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “transition:draw untuk Jalur SVG” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- transition:fade dan transition:fly
- Parameter Transisi: duration delay easing
- in: dan out: untuk Transisi Asimetris
- transition:draw untuk Jalur SVG