How animate path in WAAPI?

Asked Mar 13 '16 at 08:05

Active Mar 13 '16 at 09:41

Viewed 119 times

How (if at all) can I animate d in web animation? In the example stroke and strokeWidth are working, d doesn't?!

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

EDIT: Any preferred alternatives of achieving scripted path animation (without SMIL)?

edited Mar 13 '16 at 09:41

asked Mar 13 '16 at 08:05

ajo

1,045
4
15
30

I don't think any UA supports d animation yet. – Robert Longson Mar 13 '16 at 08:36
what a shame, considering SMIL did that easily! – ajo Mar 13 '16 at 08:37
SMIL has been around for years, the web animation spec is still being written as is SVG 2. You would have hand similar problems with SMIL when the spec was in draft. – Robert Longson Mar 13 '16 at 08:38

How animate path in WAAPI?

0 Answers0