Animating text along an circular path with svg & javascr

Animating text along an circular path with svg & javascript

本文关键字：svg amp javascr with path text along an circular Animating      更新时间：2023-09-26

我正试图弄清楚如何使用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>

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

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

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

*SVG 2（仍在开发中）确实将闭合路径视为连续路径。所以在未来，这不会成为问题

相关文章：