javascript - SVG Textpath - 动画 startOffset （文本滑动到 SVG 路径） - 在 JS

Question

如何在（不是 CSS！）中为 SVG 文本路径startOffset参数设置动画： 我想让文本沿着路径滑动...我尝试了, ，但没有成功。WebAnimation/JS
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"如果您希望它继续循环，您可以使用它。

我一直在从https://css-tricks.com上的文章中学习一些 SVG + SMIL 语法（但在我写这篇文章时，他们的网站对我来说已经关闭了。）