Search code examples
cssfirefoxsvgcss-animationssmil

SVG SMIL: animateTransform replace to set(opacity and scale attributes)

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))

Solution

  • 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.