Question

如何在startOffset（非CSS！）中为SVG文本路径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语法（但是当我写这篇文章时，他们的网站对我来说很失望。）

SVG Textpath - 动画startOffset（向下滑动SVG路径的文本） - 在JS中

1 个答案: