SVG Textpath - 動畫開始偏移（文字滑下SVG路徑） - 在JS

Question

我怎麼能在動畫的WebAnimation/JS SVG textpath startOffset參數：
我要讓文字滑下路徑。（不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（但他們的網站已經關閉了我，因爲我寫的。）