有没有办法使用 HTML 和 CSS 在 SVG 路径上制作滚动选框？

Question

我想在此处或在colin mcrae rally 2.0的主菜单中制作效果。

我想生成一个path ，然后在其中包含沿路径移动并环绕到开头的文本，因为字母 go 结束。

查看第一个示例的 html 时，我看到使用 JS 来制作它，但如果可能的话，我想避免这种情况，但这不是必需的。

抱歉，因为这是一个非常开放的问题，没有我自己的实际代码可以显示，因为这可能是一个不知道正确的搜索词以获得创建它所需的正确资源的问题。

Answer 1

您可以将textPath和SVG animation 与 SMIL 一起使用。

我制作了两个沿路径动画的相同文本。 它不是完美对齐的——那是你的任务。

 <svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <style> text { font-size: 8px } </style> <symbol id="s1"> <path id="p1" d="M 0,0 C 5,10 5,40 20,40 35,40 60,55 60,70 60,85 100,100 100,100" /> </symbol> <use href="#s1" stroke="silver" stroke-width="10" fill="none" /> <text dominant-baseline="middle"> <textPath href="#p1" startOffset="100%"> Text 1, text 2, text 3, text 3, text 4 <animate attributeName="startOffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" /> </textPath> </text> <text dominant-baseline="middle"> <textPath href="#p1" startOffset="100%"> Text 1, text 2, text 3, text 3, text 4 <animate attributeName="startOffset" from="100%" to="-100%" dur="10s" begin="5s" repeatCount="indefinite" /> </textPath> </text> </svg>