弃用的SMIL将SVGanimationreplace为CSS或Webanimation效果（hover，单击）
按照这个话题：
Firefox 38-40 SMIL问题 – 速度非常慢（从22.09.15在FF版本41中parsing）
和这个话题：
意图弃用：SMIL
SVG标签“animateTransform”不能正常工作。 用CSS或CSS转换代替SMIL（animation标签）会很好。
CONSOLE WARNING: Please use CSS animations or Web animations instead), which would work fast on the latest versions of Firefox and Chrome. 下一个Google Chrome警告：
CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
修订196823：添加SMIL弃用警告
首先，我需要实现三件事情：
1）鼠标hover效果（最简单）
它怎么样：
<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>
我删除了set标签，向rect标签添加了类，并将其添加到CSShover伪类：
.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）animation放大缩小（onclick）
它怎么样：
<!--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-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>
我目前的工作项目的工作版本如下所示：
http://jsfiddle.net/7e2jeet0 （以前只用于浏览器的FF – 因为（注意）hover在这里有两个数字 – 导致[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
我发现这个组合变体可以在Firefox中hover和播放，但只有hover效果才能在Chrome中运行。
我也对如何保存这些animation有兴趣：
http://jsfiddle.net/e4dxx2wg/
http://jsfiddle.net/e4dxx2wg/1/
通过将其转移到CSS / Webanimation？
SMIL支持并未从Chrome中删除，而是被Polyfillreplace。 Eric Willigers创build了一个完全在WebanimationAPI上实现的SMIL填充。 你可以在这里find它： https ： //github.com/ericwilligers/svg-animation
