如何用 CSS 或 Web 动画替换已弃用的 SMIL SVG 动画？

弃用 SMIL SVG 动画并用 CSS 或 Web 动画替换

由于弃用 SMIL SVG 动画，使用 CSS 或 Web 动画的替代方法建议使用 Web 动画，以在现代浏览器中获得更好的性能和兼容性。以下是如何转换上述 SMIL 动画的说明：

1.鼠标悬停效果

用CSS悬停伪类替换SMIL animate标签以达到相同的效果。

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

2.提交更改后缩放动画

要在不使用动画标签的情况下实现此效果，您可以在模板中设置初始缩放属性，然后使用 CSS 过渡来为缩放设置动画。

/* 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.单击时放大和缩小

要实现此效果，可以使用 CSS 转换和 JavaScript 事件处理程序的组合。

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

工作示例

这里是一个展示转换后的 CSS 效果的工作示例：https://jsfiddle.net/7e2jeet0/

以上是如何用 CSS 或 Web 动画替换已弃用的 SMIL SVG 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！