已弃用的 SMIL SVG 动画替换为 CSS 或 Web 动画效果（悬停、单击）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30965580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
提问by Artem.Borysov
In accordance with this topic:
根据本主题：
Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15)
and this topic:
和这个话题：
SVG tag 'animateTransform' does not work well. It would be nice to replace SMIL (animate tag) with CSS or CSS transitions.
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.
The next Google Chrome warning:
下一个谷歌浏览器警告：
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
For a start, I need to implement three things:
首先，我需要实现三件事：
1) Hover effect on mouse over(the easiest)
1）鼠标悬停效果（最简单）
How it was:
它怎么样：
<rect x="-0.5" y="-0.5" width="1" height="1" 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>
I removed the settags, added classes to the recttag and added to this to the CSS hover Pseudo-class:
我删除了set标签，向标签添加了类rect并将其添加到 CSS 悬停伪类中：
.element_tpl:hover {
stroke-opacity: 0.5;
}
2) It scales a few times after change committed to this element (pageload)
2）在提交到这个元素的更改（页面加载）后它会缩放几次
How it was:
它怎么样：
<!--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"/>
How to organize without the animatetag:
如何在没有animate标签的情况下进行组织：
???
？？？
3) It animates scale up and scale down (onclick)
3）它动画放大和缩小（onclick）
How it was:
它怎么样：
<!--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"/>
How to organize without animatetag? Tried to use :active, but there are differences in the behavior:
如何在没有animate标签的情况下组织？尝试使用:active，但行为存在差异：
.element_tpl:active {
transform: scale(1.1);
}
This is the entire code of my template element:
这是我的模板元素的完整代码：
<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">
<!--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-width="0.17" 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>
Working version from my current working project looks like:
我当前工作项目的工作版本如下所示：
http://jsfiddle.net/7e2jeet0(previously only used by a browser FF - because (pay attention) hover works here with 2 figures - cause [Chrome support SMIL and 'use' together, Firefox does not currently support SMIL and 'use' together] / according to Robert Longson)
http://jsfiddle.net/7e2jeet0（以前仅由浏览器 FF 使用 - 因为（注意）悬停在这里使用 2 个数字 - 原因 [Chrome 支持 SMIL 和“使用”在一起，Firefox 目前不支持 SMIL 和“使用” '一起] /根据罗伯特朗森的说法）
in my attempt to make the equivalent CSS, it looks like
在我尝试制作等效的 CSS 时，它看起来像
http://jsfiddle.net/7e2jeet0/1/(in FF)
http://jsfiddle.net/7e2jeet0/2/(in Chrome)
http://jsfiddle.net/7e2jeet0/1/（在FF中）
http://jsfiddle.net/7e2jeet0/2/（在 Chrome 中）
or the same for other element. Working version:
或其他元素相同。工作版本：
Thanks!
谢谢！
Edit 1
编辑 1
I found that this combination variantwill work fine for hover and mousedown in Firefox, but only the hover effect works in Chrome.
我发现这个组合变体在 Firefox 中适用于悬停和鼠标按下，但在 Chrome 中只有悬停效果有效。
I'm also interested in how could I save some of these animations:
我也对如何保存其中一些动画感兴趣：
by transfering them to CSS / Web animations?
通过将它们转移到 CSS/Web 动画？
回答by Emanuele Sabetta
SMIL support was not removed from Chrome but was replaced with a Polyfill. Eric Willigers has created a SMIL polyfill implemented entirely on the Web Animations API. You can find it here: https://github.com/ericwilligers/svg-animation
SMIL 支持并未从 Chrome 中移除，而是被 Polyfill 取代。Eric Willigers 创建了一个完全在 Web Animations API 上实现的 SMIL polyfill。你可以在这里找到它：https: //github.com/ericwilligers/svg-animation
