title: SVG Textpath - animate startOffset (text to slide down SVG path) - in JS
body: <p>How can I animate the SVG textpath <code>startOffset</code> parameter in <code>WebAnimation/JS</code> (NOT CSS!):<br>
  I want to let the text slide down the path...
  I tried <code>numbers</code>,<code>%</code>, <code>px</code> with no success.</p>
  
  <pre><code>&lt;svg id="text-on-path-svg" width="400" height="400"  style="border:1px solid #00f"&gt; 
  &lt;path id="myPathforText" fill="none" stroke="#000" d="M90,90C90,160 250,160 300,300"/&gt;
  &lt;text &gt;
      &lt;textpath id="slideText" xlink:href="#myPathforText" startOffset="50%" &gt;Text laid out along a path.&lt;/textpath&gt;
  &lt;/text&gt;
  
  &lt;script type="text/ecmascript"&gt;
    &lt;![CDATA[
  
  var slideText=document.getElementById("slideText");
  var slideTextPlayer=slideText.animate(
       [{startOffset:'0%'},
        {startOffset:'100%'}],
       {duration:3000,delay:0,iterations:Infinity});
  ]]&gt;
  &lt;/script&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/509c8pmj/" rel="nofollow">https://jsfiddle.net/509c8pmj/</a>
  Help would be much appreciated.</p>