我可以设置动画转换 raplace 吗?
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur="0.2s" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur="0.2s" fill="freeze"></animateTransform>
对于变换(缩放)的操作,就像我在这里用我的'stroke-opacity'属性做的那样:
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"></set>
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"></set>
</rect>
我试着得到这样的东西
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<set attributeName="transform" type="scale" begin="mousedown" end="mouseout" to="1.15"></set>
<set attributeName="transform" type="scale" begin="mouseup" end="mouseover" to="1"></set>
</rect>
但这种结构不起作用。
有用:
悬停示例(使用集合):http: //jsfiddle.net/exn2qr0s/
点击示例(使用 animateTransform):http: //jsfiddle.net/exn2qr0s/1/
它不起作用:
点击示例(使用集合):http: //jsfiddle.net/exn2qr0s/2/
我需要使用 set 标签而不是 animateTransform 来创建放大效果,当“mousedown”导致 animateTransform 现在在上次 Fire Fox 更新后工作不佳(已弃用的 SMIL SVG 动画替换为 CSS 或 Web 动画效果(悬停,单击))