Can I animateTransform raplace to set?
<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>
For manipulating of transform(scale), like I did it with my 'stroke-opacity' attribute here:
<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>
I try to get something like this
<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>
but this structure doesn't work.
It works:
Example of hover(using set): http://jsfiddle.net/exn2qr0s/
Example of click (using animateTransform): http://jsfiddle.net/exn2qr0s/1/
It doesn't work:
Example of click (using set): http://jsfiddle.net/exn2qr0s/2/
I need to use set tag instead animateTransform for create scale-up effect when 'mousedown' cause animateTransform now works bad after last Fire Fox updates(Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click))
Per the table in the SVG specification animateTransform only works on transforms and all the other animation elements including
<set>
do not work on transforms.