Comment remplacer les animations SMIL SVG obsolètes par des animations CSS ou Web ?

Dépréciation de l'animation SMIL SVG et remplacement par des animations CSS ou Web

En raison de la dépréciation de l'animation SMIL SVG, des approches alternatives utilisant CSS ou Les animations Web sont recommandées pour de meilleures performances et compatibilité dans les navigateurs modernes. Voici une explication sur la façon de convertir les animations SMIL mentionnées :

1. Effet de survol au survol de la souris

Remplacez les balises d'animation SMIL par une pseudo-classe de survol CSS pour obtenir le même effet.

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

2. Mise à l'échelle de l'animation après modification validée

Pour implémenter cet effet sans utiliser la balise animer, vous pouvez définir la propriété d'échelle initiale dans votre modèle, puis utiliser des transitions CSS pour animer la mise à l'échelle.

/* 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. Augmenter et réduire au clic

Pour cet effet, une combinaison de transitions CSS et de gestionnaires d'événements JavaScript peut être utilisée.

/* 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'); });

Exemple de travail

Voici un exemple fonctionnel présentant les effets CSS convertis : https://jsfiddle.net/7e2jeet0/

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!