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

【问题标题】：SVG Textpath - animate startOffset (text to slide down SVG path) - in JSSVG Textpath - 动画 startOffset （文本滑动到 SVG 路径） - 在 JS
【发布时间】：2016-09-09 14:04:46
【问题描述】：

如何为WebAnimation/JS 中的 SVG 文本路径 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/ 非常感谢您的帮助。

【问题讨论】：

标签： javascript svg web-animations

【解决方案1】：

一种方法是在textpath 元素中放置一个animate 元素，如下所示：

<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 语法（但在我写这篇文章时，他们的网站对我来说已关闭。）

【讨论】：