`player.animate（[{變換：？！ 「旋轉（10）」`

Question

我試圖使用網頁動畫/ JS（但不是CSS）來轉換SVG

我可以」牛逼得到transform: rotate(10)工作 - 不知道爲什麼

在這個例子中playerT（規模）和playerT3（strokeWidth）的罰款，但playerT2似乎並沒有做任何事情 - 爲什麼

<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是在這裏： https://jsfiddle.net/45cbhLqL/

PS：我可以用一個變換矩陣，而不是（如果我要）？

Answer 1

必須在旋轉功能指定單位（度，弧度等） 你的代碼是現在的工作：https://jsfiddle.net/45cbhLqL/1/

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