`player.animate( [ {transform: "rotate(10)"`?

Question

I'm trying to use web animation/JS (but not CSS!) to transform SVG.

I can't get the transform: rotate(10) to work--not sure why.

In the example playerT (scale) and playerT3 (strokeWidth) are fine, but playerT2 doesn't seem to do anything--why?

<svg width="400" height="400"  style="border:1px solid #00f"> 
<path id="triangle" d="M0,0L30,30L50,10z" stroke="#f00" stroke-width="3" />
<script type="text/ecmascript">
  <![CDATA[
var triangle=document.getElementById("triangle");
var playerT=triangle.animate(
    [{transform: 'scale(1)'},
     {transform: 'scale(5)'}],
      {duration:1000, delay:0,iterations: Infinity});

var playerT2=triangle.animate(
    [{transform: 'rotate(10)'},
     {transform: 'rotate(20)'}],
      {duration:1000, delay:0,iterations: Infinity});

var playerT3=triangle.animate(
    [{strokeWidth:3},
     {strokeWidth:0}],
      {duration:1000, delay:0,iterations: Infinity});
]]>
</script>
</svg>

JSFiddle is here: https://jsfiddle.net/45cbhLqL/

PS: could I use a transformation matrix instead (if I have to)?

Answer 1

You must specify the unit in the rotate function (degrees, radians etc) your code is working now : https://jsfiddle.net/45cbhLqL/1/

var playerT=triangle.animate(
    [{transform: 'rotate(10deg)'},
     {transform: 'rotate(20deg)'}],
      {duration:1000, delay:0,iterations: Infinity});