javascript - 如何使文本像新闻行情一样围绕不规则（既不是完全平坦也不是完全圆形）路径循环播放？

Question

我的目标是为文本设置动画，使其像新闻行情一样围绕 d-path 循环（在这种情况下路径不规则除外）。

• 我尝试使用@keyframes 来增加 startOffset 值，但是如果将 startOffset 设置为足够高的值（尝试在下面的代码片段中将其设置为 50），它会在文本的开头创建空间并隐藏结尾文本而不是循环。

• 由于路径不是一个完美的圆，简单地旋转整个 SVG 不会切割它。

<svg viewBox="-10 -10 100 100">
            <path id="MyPath" fill="none" stroke="" d="M 20 20 C 90 0 100 60 40 60 C 10 60 0 30 20 20 Z" />
            <g>
            <text>
                <textPath id="text-path" href="#MyPath" style="font-size: 5px !important; "  startOffset="0">
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </textPath>
            </text>
            </g>
        </svg>

标签： javascripthtmlcss