如何将已弃用的 SMIL SVG 动画迁移到使用 CSS 和 Web 动画？-css教程-PHP中文网

如何将已弃用的 SMIL SVG 动画迁移到使用 CSS 和 Web 动画？

Patricia Arquette

发布： 2024-10-25 20:52:02

原创

890 人浏览过

How can I migrate my deprecated SMIL SVG Animations to use CSS and Web Animations?

将已弃用的 SMIL SVG 动画迁移到 CSS 和 Web 动画

简介

随着 SMIL 动画的弃用，有必要寻找替代方法用于创建 SVG 动画。本文探讨了如何使用 CSS 和 Web 动画来替代 SMIL 动画，重点关注悬停效果、元素缩放和状态切换等常见场景。

使用 CSS 实现悬停效果

要使用CSS实现鼠标悬停效果，您可以修改现有的SMIL代码，如下所示：

.element_tpl:hover {
    stroke-opacity: 0.5;
}

登录后复制

当光标悬停在元素上时，这将通过减少笔画不透明度来应用悬停效果。

使用 CSS 或 Web 动画缩放元素

要在更改后多次缩放元素，您可以使用 CSS 或 Web 动画。下面是 CSS 方法：

.element_tpl {
    animation: scaleAnimation 0.5s infinite;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

登录后复制

或者，您可以使用 Web 动画：

let element = document.querySelector('.element_tpl');
let animation = element.animate([
    { transform: 'scale(1)' },
    { transform: 'scale(1.12)' },
    { transform: 'scale(1)' }
], {
    duration: 500,
    iterations: Infinity
});

登录后复制

使用 CSS 或 Web 动画进行放大和缩小动画

制作动画单击时放大或缩小的元素，您可以使用 CSS 或 Web 动画。 CSS 方法如下：

.element_tpl:active {
    transform: scale(1.1);
}

登录后复制

对于 Web 动画：

let element = document.querySelector('.element_tpl');
element.addEventListener('click', () => {
    element.animate([
        { transform: 'scale(1)' },
        { transform: 'scale(1.1)' },
        { transform: 'scale(1)' }
    ], {
        duration: 400,
        iterations: 1
    });
});

登录后复制

使用 Polyfill 保留 SMIL 动画

虽然 SMIL 支持在 Chrome 中被替换为 Polyfill，它仍然可以用来保存现有的动画。 Eric Willigers 的 SMIL polyfill（可在 https://github.com/ericwilligers/svg-animation 获取）可用于在不再原生支持 SMIL 动画的现代浏览器中运行 SMIL 动画。

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