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

Utilisation d'animations CSS ou Web au lieu d'une animation SVG SMIL obsolète

Introduction

En raison de la dépréciation de SMIL (Synchronized Multimedia Integration Language) en SVG (Scalable Vector Graphics), il est essentiel de trouver des approches alternatives utilisant des animations CSS ou Web. Cette transition permet d'améliorer les performances et la compatibilité entre les navigateurs modernes.

Remplacement de l'effet de survol

• Supprimer les balises définies SMIL.

• Ajouter Règles de survol CSS :

  <code class="css">.element_tpl:hover {
    stroke-opacity: 0.5;
  }</code>

Remplacement de l'animation à l'échelle

• Utiliser CSS pour la mise à l'échelle :

  <code class="css">.element_tpl {
    transform: scale(1);
  }
  
  .element_tpl:active {
    transform: scale(1.1); 
  }</code>

• Notez que cela peut entraîner un comportement légèrement différent par rapport à l'animation SMIL.

Remplacement de l'animation de clic

• Utilisez des images clés CSS pour animer une transition lorsqu'un utilisateur clique sur un élément :

  <code class="css">@keyframes click-anim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15);
    }
  }
  
  .element_tpl {
    animation: click-anim 0.2s forwards;
    animation-delay: 0.2s;
  }</code>

• Encore une fois, le comportement peut légèrement différer de l'animation SMIL originale.

Exemple de travail

<code class="html"><g id="switcher" cursor="pointer" stroke-width="0.15">
    <g transform="scale(1,1.375)">
        <g>
            <rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/>
            <rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
                <line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/>
            </rect>
        </g>
    </g>
</g></code>

<code class="css">#switcher {
    transform: scale(1);
}

#switcher:hover {
    stroke-opacity: 0.5;
}

#switcher:active {
    transform: scale(1.1); 
}

@keyframes click-anim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15);
    }
}

#switcher:active {
    animation: click-anim 0.2s forwards;
    animation-delay: 0.2s;
}</code>

Enregistrement des animations existantes

Les liens fournis contiennent des animations plus complexes que les exemples de la question. Les convertir en animations CSS/Web nécessitera plus d'efforts et de code personnalisé. Il est recommandé d'utiliser le polyfill SMIL mentionné dans la réponse ci-dessous pour conserver les animations SMIL existantes lors de la transition vers la prise en charge des navigateurs modernes.

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!