使用svg＆amp ;;以圆形路径为文本制作动画。 JavaScript的

Question

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

这是一个小伙伴：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（仍处于开发阶段）确实将封闭路径视为连续路径。因此，将来这不会是一个问题。