HTML Academy · Pelajaran

Menganimasikan SVG dengan CSS dan SMIL

Tambahkan pergerakan pada elemen SVG dengan peralihan CSS dan SMIL

Pelajaran 4 daripada 413 langkah

Menganimasikan SVG dengan CSS dan SMIL ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Peralihan CSS pada SVG

Atribut persembahan SVG (fill, stroke, opacity, transform) boleh dianimasikan dengan peralihan CSS. Tambahkan kelas dan tentukan peralihan tersebut: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. Peralihan CSS berfungsi dengan cara yang sama pada elemen SVG.

Animasi Bingkai Utama CSS pada SVG

Terapkan @keyframes pada elemen SVG: animasikan stroke-dashoffset untuk menghasilkan kesan melukis laluan, opacity untuk kemunculan beransur-ansur, serta transform untuk pergerakan dan putaran. Sintaks animasi yang sama seperti yang digunakan untuk elemen HTML boleh digunakan pada elemen SVG tanpa pengubahsuaian.

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

Kesan Melukis Laluan

Teknik stroke-dasharray dan stroke-dashoffset mensimulasikan lukisan laluan: tetapkan dasharray supaya sama dengan panjang laluan, tetapkan dashoffset kepada panjang laluan (tidak kelihatan), kemudian animasikan dashoffset kepada 0. Coretan itu kelihatan seolah-olah melukis dirinya sendiri dari mula hingga akhir.

Mendapatkan Panjang Laluan

path.getTotalLength() mengembalikan panjang laluan dalam unit pengguna SVG. Gunakan nilai ini untuk stroke-dasharray dan stroke-dashoffset permulaan. Ini memastikan animasi berfungsi dengan betul tanpa mengira kerumitan atau panjang laluan.

transform CSS pada SVG

Pelayar moden menyokong transform CSS pada elemen SVG. transform-origin secara lalai merujuk kepada penjuru kiri atas SVG dalam elemen SVG — bukan kepada pusat elemen seperti dalam HTML. Tentukan transform-box: fill-box supaya transform-origin merujuk kepada kotak sempadan elemen.

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

Animasi SMIL

SMIL (Bahasa Integrasi Multimedia Disegerakkan) ialah sistem animasi terbina dalam SVG. Elemen animate mengubah nilai atribut mengikut masa. SMIL tidak memerlukan JavaScript atau CSS — animasi bersifat deklaratif sepenuhnya dalam penanda 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"> memutarkan elemen mengelilingi titik tengah yang ditentukan menggunakan sintaks SMIL.

animateMotion

<animateMotion> menggerakkan elemen sepanjang laluan SVG. Rujuk laluan dengan mpath atau data laluan sebaris. Elemen itu mengikut lengkung laluan secara automatik — berguna untuk laluan gerakan kompleks tanpa pengiraan koordinat secara manual.

Pertukaran antara CSS dan SMIL

Animasi CSS: disokong dalam semua pelayar moden, bersepadu dengan kaskad CSS dan lebih mudah dikawal melalui JavaScript (jeda, undur). SMIL: terkandung sepenuhnya dalam penanda SVG, berfungsi dalam fail SVG statik tanpa akses CSS, serta bersifat deklaratif dan ekspresif untuk animasi yang mengikut laluan.

Perubahan Bentuk Laluan SVG

Animasikan perubahan antara dua bentuk laluan: laluan tersebut mesti mempunyai bilangan arahan yang sama dan struktur yang serasi. Animasi CSS menganimasikan sifat d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } untuk perubahan bentuk laluan CSS natif.

Kebolehcapaian untuk Animasi SVG

Tambahkan pertanyaan media prefers-reduced-motion untuk melumpuhkan atau memudahkan animasi SVG bagi pengguna yang berasa tidak selesa dengan gerakan. Animasi hiasan hendaklah dilumpuhkan sepenuhnya; animasi bermakna seperti keadaan pemuatan hendaklah dipermudah, bukannya dihentikan.

Semakan Pengetahuan

Bagaimanakah teknik stroke-dasharray dan stroke-dashoffset menghasilkan animasi melukis laluan?

Jawab dalam pelajaran interaktif

Ringkasan

Animasi SVG menggunakan peralihan CSS dan bingkai utama untuk kesan berasaskan sifat, teknik stroke-dasharray/dashoffset untuk melukis laluan, animate/animateTransform/animateMotion SMIL untuk animasi deklaratif dalam SVG, serta prefers-reduced-motion untuk kebolehcapaian. CSS dan SMIL saling melengkapi — pilih berdasarkan sama ada SVG memerlukan penyepaduan dengan kaskad CSS atau kebolehgerakan sebagai fail kendiri.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menganimasikan SVG dengan CSS dan SMIL” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Menganimasikan SVG dengan CSS dan SMIL”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menganimasikan SVG dengan CSS dan SMIL”?

Tambahkan pergerakan pada elemen SVG dengan peralihan CSS dan SMIL Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Menganimasikan SVG dengan CSS dan SMIL” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy