已弃用的 SMIL SVG 动画替换为 CSS 或 Web 动画效果（悬停、单击）

Posted 2023-03-06

【中文标题】已弃用的 SMIL SVG 动画替换为 CSS 或 Web 动画效果（悬停、单击）

【英文标题】：Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

【发布时间】：2015-09-07 01:21:06

【问题描述】：

按照这个题目：

Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15)

还有这个话题：

Intent to deprecate: SMIL

SVG 标签“animateTransform”不能正常工作。用 CSS 或 CSS 过渡替换 SMIL（动画标签）会很好。

CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.

---

下一个谷歌浏览器警告：

CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated 
and will be removed. Please use CSS animations or Web animations instead.

Revision 196823: Add SMIL deprecation warning

---

首先，我需要实现三件事：

1) 鼠标悬停效果（最简单）

过得怎么样：

<rect x="-0.5" y="-0.5"   fill="white">
    <!--it makes half-visible selecting effect -->
    <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
    <!-- explicitly reverse the opacity animation on mouseout -->
    <set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>

我删除了set 标记，将类添加到rect 标记并将其添加到CSS 悬停伪类：

.element_tpl:hover 
    stroke-opacity: 0.5;

---

2) 在提交到此元素的更改（页面加载）后，它会缩放几次

过得怎么样：

<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>

如何在没有animate 标签的情况下进行组织：

？？？

---

3) 动画放大和缩小（点击）

过得怎么样：

<!--it animates scale up and scale down onclick -->
    <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/>
    <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/>

没有animate标签如何组织？尝试使用:active，但行为存在差异：

.element_tpl:active 
    transform: scale(1.1); 

---

这是我的模板元素的全部代码：

<g id="switcher" cursor="pointer" stroke->
    <g transform="scale(1,1.375)">
        <g>
            <rect x="-0.5" y="-0.5"   stroke="white" pointer-events="none"/>
            <rect x="-0.5" y="-0.5"   fill="white">
                <!--it makes half-visible selecting effect -->
                <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
                <!-- explicitly reverse the opacity animation on mouseout -->
                <set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
            </rect>
            <line x1="0" y1="-0.25" x2="0" y2="0.25" stroke- stroke-linecap="round" pointer-events="none"/><!-- vertical on -->
            <!--animation-->
            <!--it scales a few times after change committed to this element -->
            <animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
            <!--it animates scale up and scale down onclick -->
            <animateTransform attributeName="transform" attributeType="XML"
            type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
            fill="freeze"/>
            <animateTransform attributeName="transform" attributeType="XML"
            type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
            fill="freeze"/>
        </g>
    </g>
</g>

---

我当前工作项目的工作版本如下所示：

http://jsfiddle.net/7e2jeet0（以前仅由浏览器 FF 使用 - 因为（注意）悬停在这里使用 2 个数字 - 导致 [Chrome 支持 SMIL 和“使用”一起，Firefox 目前不支持 SMIL 和“使用”一起] / 根据罗伯特·朗森的说法）

在我尝试制作等效的 CSS 时，它看起来像

http://jsfiddle.net/7e2jeet0/1/（FF 中）

http://jsfiddle.net/7e2jeet0/2/（在 Chrome 中）

---

或其他元素相同。工作版本：

http://jsfiddle.net/f7o03rsr/

http://jsfiddle.net/f7o03rsr/1/

http://jsfiddle.net/f7o03rsr/2/

谢谢！

---

编辑 1

我发现this combination variant 在 Firefox 中可以很好地用于悬停和鼠标按下，但在 Chrome 中只有悬停效果。

---

我也对如何保存其中一些动画感兴趣：

http://jsfiddle.net/e4dxx2wg/

http://jsfiddle.net/e4dxx2wg/1/

通过将它们转移到 CSS / Web 动画？

【问题讨论】：

从 Chrome 中删除 SMIL 支持是一场灾难。目前，CSS 无法替代那些高级动画和交互功能。 SMIL 非常先进和强大。我怀疑 SMIL polyfill 可能是唯一的解决方案。看看 FakeSmile polyfill：launchpad.net/smil

@EmanueleSabetta – 除了缺乏功能外，CSS 动画的质量也比 SMIL 差。 CSS 为渲染的光栅元素设置动画，而 SMIL 一直处理原始矢量数据（至少在 Chrome 中）。

@EmanueleSabetta 您仍然可以使用 javascript 在 SVG 元素上应用 CSS 以对其进行动画处理。看看GreenSock GSAP（GreenSock动画平台）greensock.com

【参考方案1】：

SMIL 支持并未从 Chrome 中移除，而是由 Polyfill 取代。 Eric Willigers 创建了一个完全在 Web Animations API 上实现的 SMIL polyfill。你可以在这里找到它： https://github.com/ericwilligers/svg-animation

【讨论】：

这里是 svg 卡通，由 svg 和一点 js tbyrne.org/flash2svg-v3-13（来自此讨论 groups.google.com/a/chromium.org/forum/#!msg/blink-dev/…）

是的，看起来 Polyfill 是最好的解决方案，因为缺乏对 Web Animations API 的跨浏览器支持。 caniuse.com/#search=web%20animations

github.com/webframes/smil2css（来自此讨论groups.google.com/a/chromium.org/forum/#!msg/blink-dev/…）。这是这个动画：webframes.github.io/smil2css。谁知道 flash2svg 或 smil2css？

由于脚本执行被阻止，糟糕的 polyfill 无法在背景图像上工作。

最近，Google 还宣布，由于大众的需求，他们暂停了 SMIL 的弃用。 SMIL 又回到了 Chrome 中。