SVG Textpath - живой startOffset (текст, чтобы скользить вниз путь SVG) - в JS

Question

Как я могу оживить SVG параметр textpath startOffset в WebAnimation/JS:
Я хочу, чтобы текст слайд вниз по пути .. (НЕ CSS!) . Я попробовал numbers, %, px без успеха.

<svg id="text-on-path-svg" width="400" height="400" style="border:1px solid #00f"> 
<path id="myPathforText" fill="none" stroke="#000" d="M90,90C90,160 250,160 300,300"/> 
<text > 
    <textpath id="slideText" xlink:href="#myPathforText" startOffset="50%" >Text laid out along a path.</textpath> 
</text> 

<script type="text/ecmascript"> 
    <![CDATA[ 

var slideText=document.getElementById("slideText"); 
var slideTextPlayer=slideText.animate(
    [{startOffset:'0%'}, 
     {startOffset:'100%'}], 
    {duration:3000,delay:0,iterations:Infinity}); 
]]> 
</script> 
</svg> 

JSFiddle: https://jsfiddle.net/509c8pmj/ Помощь была бы оценена.

Answer 1

Одним из способов является путем размещения animate элемента внутри textpath элемента, например:

<textpath id="slideText" xlink:href="#myPathforText" startOffset="50%" > 
    Text laid out along a path. 
    <animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="3s" repeatCount="indefinite"/> 
</textpath> 

Вы можете использовать repeatCount="indefinite", если вы хотите, чтобы держать зацикливание.

Я изучаю некоторые из синтаксиса SVG + SMIL из статей на https://css-tricks.com (но их сайт был вниз для меня, как я пишу это.)