【发布时间】：2015-09-07 01:21:06
【问题描述】：
按照这个题目：
Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15)
还有这个话题：
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" 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 标记并将其添加到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-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 使用 - 因为（注意）悬停在这里使用 2 个数字 - 导致 [Chrome 支持 SMIL 和“使用”一起，Firefox 目前不支持 SMIL 和“使用”一起] / 根据罗伯特·朗森的说法）
在我尝试制作等效的 CSS 时，它看起来像
http://jsfiddle.net/7e2jeet0/1/（FF 中）
http://jsfiddle.net/7e2jeet0/2/（在 Chrome 中）
或其他元素相同。工作版本：
谢谢！
编辑 1
我发现this combination variant 在 Firefox 中可以很好地用于悬停和鼠标按下，但在 Chrome 中只有悬停效果。
我也对如何保存其中一些动画感兴趣：
通过将它们转移到 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
标签： css animation svg css-animations smil