Comment puis-je migrer mes animations SMIL SVG obsolètes pour utiliser les animations CSS et Web ?

Migration des animations SMIL SVG obsolètes vers des animations CSS et Web

Introduction

Avec la dépréciation des animations SMIL, il est devenu nécessaire de trouver des méthodes alternatives pour créer des animations SVG. Cet article explore l'utilisation des animations CSS et Web en remplacement des animations SMIL, en se concentrant sur des scénarios courants tels que les effets de survol, la mise à l'échelle des éléments et le basculement entre les états.

Implémentation d'un effet de survol avec CSS

Pour implémenter un effet de survol au survol de la souris à l'aide de CSS, vous pouvez modifier le code SMIL existant comme suit :

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

Cela appliquera l'effet de survol en réduisant l'opacité du trait lorsque le curseur survole l'élément.

Mise à l'échelle d'un élément avec des animations CSS ou Web

Pour mettre à l'échelle un élément plusieurs fois après une modification, vous pouvez utiliser des animations CSS ou Web. Voici une approche CSS :

.element_tpl {
    animation: scaleAnimation 0.5s infinite;
}

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

Vous pouvez également utiliser des animations 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
});

Animer l'augmentation et la réduction avec des animations CSS ou Web

Pour animer un élément à augmenter et à réduire lorsque vous cliquez dessus, vous pouvez utiliser des animations CSS ou Web. Voici l'approche CSS :

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

Pour les animations 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
    });
});

Préserver les animations SMIL avec un Polyfill

Alors que le support SMIL a été remplacé par un polyfill dans Chrome, il peut toujours être utilisé pour conserver les animations existantes. Le polyfill SMIL d'Eric Willigers, disponible sur https://github.com/ericwilligers/svg-animation, peut être utilisé pour exécuter des animations SMIL dans les navigateurs modernes qui ne les prennent plus en charge nativement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!