PricingLoginStart free
HTML Academy · Pelajaran

Menganimasikan SVG dengan CSS dan SMIL

Tambahkan gerakan ke elemen SVG dengan transisi CSS dan SMIL.

Pelajaran 4 dari 413 langkah

Menganimasikan SVG dengan CSS dan SMIL adalah pelajaran HTML 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Transisi CSS pada SVG

Atribut presentasi SVG (fill, stroke, opacity, transform) dapat dianimasikan dengan transisi CSS. Tambahkan kelas dan tentukan transisinya: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. Transisi CSS bekerja dengan cara yang sama pada elemen SVG.

Animasi Kerangka Kunci CSS pada SVG

Terapkan @keyframes pada elemen SVG: animasikan stroke-dashoffset untuk efek menggambar jalur, opacity untuk kemunculan perlahan, serta transform untuk pergerakan dan rotasi. Sintaks animasi yang sama seperti yang digunakan pada elemen HTML dapat diterapkan pada elemen SVG tanpa perubahan.

@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }

Efek Menggambar Jalur

Teknik stroke-dasharray dan stroke-dashoffset menyimulasikan proses menggambar jalur: atur dasharray agar sama dengan panjang jalur, atur dashoffset ke panjang jalur (sehingga tidak terlihat), lalu animasikan dashoffset ke 0. Garis tepi akan tampak menggambar dirinya sendiri dari awal hingga akhir.

Mendapatkan Panjang Jalur

path.getTotalLength() mengembalikan panjang jalur dalam satuan pengguna SVG. Gunakan nilai ini untuk stroke-dasharray dan stroke-dashoffset awal. Dengan begitu, animasi berfungsi dengan benar terlepas dari kerumitan atau panjang jalur.

transform CSS pada SVG

Peramban modern mendukung transform CSS pada elemen SVG. Secara bawaan, transform-origin berada di sudut kiri atas SVG pada elemen SVG—bukan di tengah elemen seperti pada HTML. Tentukan transform-box: fill-box agar transform-origin mengacu pada kotak pembatas elemen.

.spinner {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotate 1s linear infinite;
}

Animasi SMIL

SMIL (Synchronized Multimedia Integration Language) adalah sistem animasi bawaan SVG. Elemen animate mengubah nilai atribut seiring waktu. SMIL tidak memerlukan JavaScript atau CSS—animasi sepenuhnya deklaratif di dalam markup SVG.

<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"> memutar elemen mengelilingi titik pusat tertentu menggunakan sintaks SMIL.

animateMotion

<animateMotion> memindahkan elemen mengikuti jalur SVG. Rujuk jalur dengan mpath atau data jalur sebaris. Elemen akan otomatis mengikuti kurva jalur—berguna untuk jalur gerak kompleks tanpa perlu menghitung koordinat secara manual.

Perbandingan CSS dan SMIL

Animasi CSS: didukung oleh semua peramban modern, terintegrasi dengan kaskade CSS, dan lebih mudah dikendalikan melalui JavaScript (menjeda, membalikkan). SMIL: mandiri di dalam markup SVG, berfungsi pada file SVG statis tanpa akses ke CSS, serta deklaratif dan ekspresif untuk animasi yang mengikuti jalur.

Morfing Jalur SVG

Animasikan perubahan antara dua bentuk jalur: jalur harus memiliki jumlah perintah yang sama dan struktur yang kompatibel. Animasi CSS menganimasikan properti d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } untuk morfing jalur CSS bawaan.

Aksesibilitas untuk Animasi SVG

Tambahkan kueri media prefers-reduced-motion untuk menonaktifkan atau menyederhanakan animasi SVG bagi pengguna yang merasa tidak nyaman dengan gerakan. Animasi dekoratif sebaiknya dinonaktifkan sepenuhnya; animasi bermakna, seperti keadaan pemuatan, sebaiknya disederhanakan, bukan dihentikan.

Pemeriksaan Pengetahuan

Bagaimana teknik stroke-dasharray dan stroke-dashoffset menghasilkan animasi menggambar jalur?

Jawab di pelajaran interaktif

Ringkasan

Animasi SVG menggunakan transisi CSS dan kerangka kunci untuk efek berbasis properti, teknik stroke-dasharray/dashoffset untuk menggambar jalur, SMIL animate/animateTransform/animateMotion untuk animasi deklaratif di dalam SVG, serta prefers-reduced-motion untuk aksesibilitas. CSS dan SMIL saling melengkapi—pilih berdasarkan apakah SVG memerlukan integrasi dengan kaskade CSS atau portabilitas sebagai file mandiri.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
40
Pelajaran
159
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menganimasikan SVG dengan CSS dan SMIL” gratis?

Ya — teks lengkap “Menganimasikan SVG dengan CSS dan SMIL” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menganimasikan SVG dengan CSS dan SMIL”?

Tambahkan gerakan ke elemen SVG dengan transisi CSS dan SMIL. Kamu berlatih HTML 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 HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML 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 “Menganimasikan SVG dengan CSS dan SMIL” 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 HTML Academy ini?

Ya. Setiap pelajaran HTML 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

  1. SVG Inline vs img dan object
  2. Bentuk Dasar SVG rect circle path
  3. viewBox SVG dan Penskalaan Responsif
  4. Menganimasikan SVG dengan CSS dan SMIL
← Kembali ke HTML Academy