SVG 文本路径 - 动画开始偏移量(文本向下滑动 SVG 路径） - 在 JS 中

SVG Textpath - animate startOffset (text to slide down SVG path) - in JS

本文关键字：SVG 路径 文本 JS 动画 开始 偏移量      更新时间：2023-09-26

如何在WebAnimation/JS（不是CSS！）中对SVG文本路径startOffset参数进行动画处理：
我想让文本沿着路径滑行...我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/帮助将不胜感激。

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

相关文章：