Bagaimanakah saya boleh memindahkan Animasi SMIL SVG saya yang telah ditamatkan untuk menggunakan CSS dan Animasi Web?

Memindahkan Animasi SMIL SVG yang Dihentikan kepada CSS dan Animasi Web

Pengenalan

Dengan penamatan animasi SMIL, adalah menjadi perlu untuk mencari kaedah alternatif untuk mencipta animasi SVG. Artikel ini meneroka penggunaan CSS dan animasi Web sebagai pengganti untuk animasi SMIL, memfokuskan pada senario biasa seperti kesan hover, penskalaan elemen dan togol antara keadaan.

Melaksanakan Kesan Hover dengan CSS

Untuk melaksanakan kesan tuding pada tetikus di atas menggunakan CSS, anda boleh mengubah suai kod SMIL sedia ada seperti berikut:

.element_tpl:hover {
    stroke-opacity: 0.5;
}

Ini akan menggunakan kesan lereng dengan mengurangkan kelegapan lejang apabila kursor menuding ke atas elemen.

Menskalakan Elemen dengan CSS atau Animasi Web

Untuk menskala elemen beberapa kali selepas perubahan, anda boleh menggunakan animasi CSS atau Web. Berikut ialah pendekatan CSS:

.element_tpl {
    animation: scaleAnimation 0.5s infinite;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

Sebagai alternatif, anda boleh menggunakan animasi Web:

let element = document.querySelector('.element_tpl');
let animation = element.animate([
    { transform: 'scale(1)' },
    { transform: 'scale(1.12)' },
    { transform: 'scale(1)' }
], {
    duration: 500,
    iterations: Infinity
});

Animating Skala Naik dan Skalakan dengan CSS atau Animasi Web

Untuk menganimasikan elemen untuk meningkatkan dan menurunkan apabila diklik, anda boleh menggunakan sama ada animasi CSS atau Web. Berikut ialah pendekatan CSS:

.element_tpl:active {
    transform: scale(1.1);
}

Untuk animasi Web:

let element = document.querySelector('.element_tpl');
element.addEventListener('click', () => {
    element.animate([
        { transform: 'scale(1)' },
        { transform: 'scale(1.1)' },
        { transform: 'scale(1)' }
    ], {
        duration: 400,
        iterations: 1
    });
});

Memelihara Animasi SMIL dengan Polyfill

Sementara sokongan SMIL digantikan dengan polyfill dalam Chrome, ia masih boleh digunakan untuk mengekalkan animasi sedia ada. Polifill SMIL Eric Willigers, tersedia di https://github.com/ericwilligers/svg-animation, boleh digunakan untuk menjalankan animasi SMIL dalam pelayar moden yang tidak lagi menyokongnya secara asli.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memindahkan Animasi SMIL SVG saya yang telah ditamatkan untuk menggunakan CSS dan Animasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!