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

Using CSS or Web Animations Instead of Deprecated SMIL SVG Animation

Introduction

Due to the deprecation of SMIL (Synchronized Multimedia Integration Language) animations in SVG (Scalable Vector Graphics), it's essential to find alternative approaches using CSS or Web animations. This transition helps improve performance and compatibility across modern browsers.

Replacing Hover Effect

• Remove SMIL set tags.

• Add CSS hover rules:

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

Replacing Scale Animation

• Use CSS for scaling:

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

• Note that this may result in slightly different behavior compared to SMIL animation.

Replacing Click Animation

• Use CSS keyframes to animate a transition when an element is clicked:

  <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>

• Again, the behavior may slightly differ from the original SMIL animation.

Working Example

<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>

Saving Existing Animations

The provided links contain animations that are more complex than the examples in the question. Converting them to CSS / Web animations will require more effort and custom code. It's recommended to use the SMIL polyfill mentioned in the answer below to maintain existing SMIL animations while transitioning to modern browser support.

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