[英]SVG Textpath - animate startOffset (text to slide down SVG path) - in JS
How can I animate the SVG textpath startOffset
parameter in WebAnimation/JS
(NOT CSS!): 如何为
WebAnimation/JS
的SVG文本路径startOffset
参数设置动画(不支持CSS!):
I want to let the text slide down the path... I tried numbers
, %
, px
with no success. 我想让文本沿着路径滑动...我尝试了
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/ Help would be much appreciated. JSFiddle: https ://jsfiddle.net/509c8pmj/帮助将不胜感激。
One way is by placing an animate
element inside your textpath
element, like this: 一种方法是在
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>
You can use repeatCount="indefinite"
if you want it to keep looping. 如果希望它继续循环,可以使用
repeatCount="indefinite"
。
I've been learning some of the SVG + SMIL syntax from articles on https://css-tricks.com (but their site was down for me as I'm writing this.) 我一直在从https://css-tricks.com上的文章中学习一些SVG + SMIL语法(但是在我写这篇文章时,他们的网站对我来说是关闭的)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.