Bagaimana untuk Menggantikan Animasi SMIL SVG yang Menamatkan dengan CSS atau Animasi Web?

Pemansuhan SMIL SVG Animasi dan Penggantian dengan CSS atau Animasi Web

Disebabkan penamatan animasi SMIL SVG, pendekatan alternatif menggunakan CSS atau Animasi web disyorkan untuk prestasi dan keserasian yang lebih baik dalam pelayar moden. Berikut ialah penjelasan tentang cara menukar animasi SMIL yang disebutkan:

1. Kesan Hover pada Mouse Over

Ganti teg animasi SMIL dengan kelas Pseudo hover CSS untuk mencapai kesan yang sama.

/* Original SMIL */
<set attributeName="stroke-opacity" .../>
<set attributeName="stroke-opacity" .../>
/* CSS Equivalent */
.element_tpl:hover {
  stroke-opacity: 0.5;
}

2. Skala Animasi Selepas Perubahan Komited

Untuk melaksanakan kesan ini tanpa menggunakan teg animasi, anda boleh menetapkan sifat skala awal dalam templat anda dan kemudian menggunakan peralihan CSS untuk menghidupkan penskalaan.

/* Original SMIL */
<animateTransform .../>
/* CSS Equivalent */
@media (all) {
  .element_tpl {
    transform: scale(1, 1.375);
    transition: transform 0.5s ease-in-out;
  }
  .element_tpl:hover {
    transform: scale(1.12, 1.375);
  }
}

3. Skalakan dan Skalakan pada Klik

Untuk kesan ini, gabungan peralihan CSS dan pengendali acara JavaScript boleh digunakan.

/* Original SMIL */
<animateTransform .../>
<animateTransform .../>
/* CSS Equivalent */
@media (all) {
  .element_tpl {
    transition: transform 0.2s ease-in-out;
  }
  .element_tpl:active {
    transform: scale(1.1);
  }
}
/* JavaScript Event Handlers */
const element = document.querySelector('.element_tpl');
element.addEventListener('mousedown', () => { element.classList.add('active'); });
element.addEventListener('mouseup', () => { element.classList.remove('active'); });

Contoh Berfungsi

Berikut ialah contoh kerja yang mempamerkan kesan CSS yang ditukar: https://jsfiddle.net/7e2jeet0/

Atas ialah kandungan terperinci Bagaimana untuk Menggantikan Animasi SMIL SVG yang Menamatkan dengan CSS atau Animasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!