Html 悬停时设置SVG动画

我正在尝试在悬停状态下设置SVG文件的动画。默认情况下，它使用svg功能设置动画，如：

  <animateTransform attributeType="xml"
                attributeName="transform"
                type="rotate"
                from="0 16 30"
                to="360 16 30"
                dur="3s"
                repeatCount="indefinite"/>

在开始时使用鼠标悬停，在结束时使用鼠标悬停
这也可以通过CSS实现。有了CSS，使用CSS将更加经得起未来的考验

给小齿轮和大齿轮的路径指定它们自己的ID
将CSS动画应用于齿轮，初始
动画播放状态为
暂停

在
：悬停
svg
元素的
，将
动画播放状态更改为
正在运行
下面的演示仅使用无前缀的
动画
属性。要使其在跨浏览器时保持一致，应添加浏览器前缀


#cogsall，
#科格比格{
动画名称：旋转；
动画持续时间：4000ms；
动画迭代次数：无限；
动画计时功能：线性；
变换原点：15.887px 29.88px；
动画播放状态：暂停；
}
#小齿轮{
动画持续时间：3000ms；
变换原点：24.691px 35.778px；
动画方向：反向；
}
svg:hover#cogBig，
svg：悬停#小{
动画播放状态：运行；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

2.


对我来说已经足够了：

begin=“mouseover”

（没有“团队”）
根据@AlexEfremo的说法，如果你同时使用
keyTimes
，Firefox会原谅你的错误设置，而Chrome和Edge则不会

确保您的
keyTimes
末尾不包含分号，如下所示：

有效的


无效的
复制@keyframes动画{}
并给它一个不同的名称@keyframes animation hover{}，用于悬停状态。
@web-tiki-Firefox确实支持变换原点的百分比值。它从41版开始就这么做了。它不知道@WebTiki。我已将
变换原点
更改为基于像素位置使用像素。它不支持
变换原点
使用SVG元素的百分比值，但是@Robert.@webtiki-Firefox自版本41以来支持SVG元素上的变换原点（百分比值）。根据规范，Chrome确定此类百分比边界框的方法是不正确的，这就是为什么存在差异，但这不是规范缺陷就是Chrome缺陷。Chrome对SVG元素的transform origin的实现有一个隐式转换框：填充框，这是不正确的。Firefox对transform box的支持在规范作者和Chrome决定是否更改Chrome或规范时处于一个标志之下。下面的解决方案是否解决了问题@AlexEfremo？@web tiki是的。对不起，我只是忘了把它标记为已解决。
      <animateTransform attributeType="xml"
                attributeName="transform"
                type="rotate"
                from="360 24.69 35.778"
                to="0 24.69 35.778"
                dur="2s"
                begin="team.mouseover" 
                end="team.mouseout"
                repeatCount="indefinite"/>

<animateTransform attributeName="transform"
                          additive="replace"
                          type="translate"
                          dur="0.24s"
                          keyTimes="0;.167;.333;.5;.667;.833;1"
                          values="12,22.05;12.084,22.104;12.088,22.078;12.128,22.07;12.068,22.071;12.05,22.05;12.05,22.05"
                          keySplines=".25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;0 0 1 1"
                          calcMode="spline"
                          begin="mouseover"
                          fill="freeze"/>