javascript - 使用 svg 和 javascript 沿着圆形路径对文本进行动画处理

Question

我试图弄清楚如何使用 http://snapsvg.io 让我的文本沿着圆形路径连续循环。 。我已经能够让它沿着路径移动，但是一旦到达终点它就会停止。

这是一个jsfiddle:https://jsfiddle.net/12x6q368/

<svg id="svgout" width="100%" height="100%" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

<script>
 var s = Snap("#svgout"); 

 var path = "M830.3,379.4c-17.2,73.3-202.5,92.4-413.8,42.7S48,272.7,65.2,199.4 s202.5-92.4,413.8-42.7S847.6,306.2,830.3,379.4z";

 var text = s.text(1000,50,'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.')
    .attr({ 'textpath': path })
    .textPath.animate({ 'startOffset': -2000 }, 4000 );
</script>

如有必要，我也愿意使用其他库。

Answer 1

确实没有一种简单的方法可以做你想做的事。 SVG 1.1* 不将闭合路径视为连续路径。没有办法让它自动循环到路径的开头。

我能想到的唯一方法是拥有两个或更多版本的路径。每个都有不同的路径起点。然后，当文本接近循环到起点时，将其切换到另一条路径。

* SVG 2(仍在开发中)确实将闭合路径视为连续路径。所以在未来，这将不再是问题。