How to Replace Deprecating SMIL SVG Animations with CSS or Web Animations?

Deprecation of SMIL SVG Animation and Replacement with CSS or Web Animations

Due to the deprecation of SMIL SVG animation, alternative approaches using CSS or Web animations are recommended for better performance and compatibility in modern browsers. Here's an explanation of how to convert the mentioned SMIL animations:

1. Hover Effect on Mouse Over

Replace the SMIL animate tags with a CSS hover Pseudo-class to achieve the same effect.

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

2. Scale Animation After Change Committed

To implement this effect without using the animate tag, you can set the initial scale property in your template and then use CSS transitions to animate the scaling.

/* Original SMIL */
<animatetransform ...></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. Scale Up and Scale Down on Click

For this effect, a combination of CSS transitions and JavaScript event handlers can be used.

/* Original SMIL */
<animatetransform ...></animatetransform>
<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'); });

Working Example

Here is a working example showcasing the converted CSS effects: https://jsfiddle.net/7e2jeet0/

The above is the detailed content of How to Replace Deprecating SMIL SVG Animations with CSS or Web Animations?. For more information, please follow other related articles on the PHP Chinese website!