SVG Textpath - 动画开始偏移（文字滑下SVG路径） - 在JS

我怎么能在动画的WebAnimation/JS SVG textpath startOffset参数：
我要让文字滑下路径。（不CSS！）我试过numbers,%,px没有成功。SVG Textpath - 动画开始偏移（文字滑下SVG路径） - 在JS

<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/ 帮助将非常感激。

来源

2016-03-07 ajo

的方法之一是放置一个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（但他们的网站已经关闭了我，因为我写的。）

来源

2016-09-09 05:56:51 MarcusFromNZ

SVG Textpath - 动画开始偏移（文字滑下SVG路径） - 在JS

回答

相关问题