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

时间:2016-03-05 14:48:10

标签: javascript svg web-animations ecma

我正在尝试使用 web动画/ 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:我可以使用转换矩阵(如果必须的话)吗?

1 个答案:

答案 0 :(得分:1)

您必须在旋转功能中指定单位(度,弧度等) 您的代码现在正在运行:https://jsfiddle.net/45cbhLqL/1/

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