javascript - WAAPIでパスをどのようにアニメーション化しますか?

Question

dWeb アニメーションでアニメートするにはどうすればよいですか? 例ではstrokeandstrokeWidthが機能していますdよね?!

<svg id="svg-path-anim" width="60" height="50"  style="border:1px solid #00f"> 
<path id="wave1" d="M10,10L50,10" stroke="#000" stroke-width="1" fill="none" />

<script type="text/ecmascript">
  <![CDATA[
var wave1 =   document.getElementById("wave1");
var playerWave1=wave1.animate([
{stroke:'#00f', strokeWidth:1, d:'M10,10,L50,10'},
{stroke:'#f00', strokeWidth:4, d:'M10,10,L50,40'}],
{duration:3000, delay:0,iterations: Infinity});
]]>
</script>
</svg>

編集: スクリプト化されたパス アニメーション (SMIL なし) を実現するための推奨される代替手段はありますか?