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

根据这一主题：

Firefox 38-40 SMIL问题-速度非常慢（从2015年9月22日起在FF版本41中解决）

这个话题：

不赞成的意图：SMIL

SVG标记“animateTransform”无法正常工作。最好用CSS或CSS转换替换SMIL（动画标签）

控制台警告：请改用CSS动画或Web动画），
在最新版本的Firefox和Chrome上可以快速运行。

---

下一个谷歌浏览器警告：

控制台警告：不推荐使用SVG的SMIL动画（“动画”、“设置”等）
并将被删除。请改用CSS动画或Web动画。

修订版196823：添加SMIL弃用警告

---

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

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

情况如何：

&lt；rect x=“-0.5”y=“-0.5”width=“1”height=“1”fill=“white”&gt；
&lt--它使半可见的选择效果--&gt；
&lt；将attributeName=“stroke opacity”begin=“mouseover”end=“mouseout”设置为=“0.5”/&gt；
&lt；！--在mouseout上显式反转不透明度动画--&gt；
&lt；将attributeName=“stroke opacity”begin=“mouseout”end=“mouseover”设置为=“1”/&gt；
&lt/rect&gt；

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

.element\u tpl:悬停{
笔划不透明度：0.5；
}

---

2） 更改提交到此元素（pageload）后，它会缩放几次

情况如何：

&lt--动画--&gt；
&lt--更改提交到此元素后，它会扩展几次--&gt；
&lt；animateTransform attributeType=“XML”attributeName=“transform”type=“scale”dur=“0.5s”keyTimes=“0；0.5；0.5；1”values=“1；1.12；1”repeatCount=“6”fill=“freeze”/gt；

如何在没有动画标记的情况下组织：

???

---

3） 它为放大和缩小设置动画（onclick）

情况如何：

&lt--它会在单击时设置放大和缩小动画--&gt；
&lt；animateTransform attributeName=“transform”attributeType=“XML”type=“scale”from=“1”to=“1.15”repeatCount=“1”begin=“mousedown+0.2s”dur=“0.2s”fill=“freeze”/gt；
&lt；animateTransform attributeName=“transform”attributeType=“XML”type=“scale”from=“1.15”to=“1”repeatCount=“1”begin=“mouseup+0.4s”dur=“0.2s”fill=“freeze”/gt；

没有动画标记如何组织？尝试使用：active，但行为存在差异：

.element\u tpl:激活{
转换：比例（1.1）；
}

---

这是my template元素的完整代码：

&lt；g id=“switcher”cursor=“pointer”stroke width=“0.15”&gt；
&lt；g transform=“scale（1,1.375）”&gt；
&lt；g&gt；
&lt；rect x=“-0.5”y=“-0.5”width=“1”height=“1”stroke=“white”pointer events=“无”/&gt；
&lt；rect x=“-0.5”y=“-0.5”width=“1”height=“1”fill=“white”&gt；
&lt--它使半可见的选择效果--&gt；
&lt；将attributeName=“stroke opacity”begin=“mouseover”end=“mouseout”设置为=“0.5”/&gt；
&lt；！--在mouseout上显式反转不透明度动画--&gt；
&lt；将attributeName=“stroke opacity”begin=“mouseout”end=“mouseover”设置为=“1”/&gt；
&lt/rect&gt；
&lt；line x1=“0”y1=“-0.25”x2=“0”y2=“0.25”笔划宽度=“0.17”笔划linecap=“round”指针事件=“无”/&gt&lt；！--垂直开启--&gt；
&lt--动画--&gt；
&lt--更改提交到此元素后，它会扩展几次--&gt；
&lt；animateTransform attributeType=“XML”attributeName=“transform”type=“scale”dur=“0.5s”keyTimes=“0；0.5；0.5；1”values=“1；1.12；1”repeatCount=“6”fill=“freeze”/gt；
&lt--它会在单击时设置放大和缩小动画--&gt；
&lt；animateTransform attributeName=“transform”attributeType=“XML”
type=“scale”from=“1”to=“1.15”repeatCount=“1”begin=“mousedown+0.2s”dur=“0.2s”
fill=“冻结”/&gt；
&lt；animateTransform attributeName=“transform”attributeType=“XML”
type=“scale”from=“1.15”to=“1”repeatCount=“1”begin=“mouseup+0.4s”dur=“0.2s”
fill=“冻结”/&gt；
&lt/g&gt；
&lt/g&gt；
&lt/g&gt；

---

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

http://jsfiddle.net/7e2jeet0 （以前仅由浏览器FF使用-因为（注意）hover在这里使用两个数字-原因[Chrome支持SMIL和“使用”在一起，Firefox目前不支持SMIL和“使用”在一起]/根据Robert Longson的说法）

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

http://jsfiddle.net/7e2jeet0/1/ （以FF为单位）

http://jsfiddle.net/7e2jeet0/2/ （镀铬）

---

或者，其他元素也是如此。工作版本：

http://jsfiddle.net/f7o03rsr/

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

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

谢谢

---

编辑1

我发现这种组合变体在Firefox中可以很好地用于悬停和鼠标向下，但在Chrome中只有悬停效果有效

---

我还对如何保存这些动画感兴趣：

http://jsfiddle.net/e4dxx2wg/

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

通过将它们转换为CSS/Web动画