SVG 仅在 Firefox 中工作的路径上的动画文本

Question

我正在尝试解决 SVG 文本的问题，该文本应该在路径上进行动画处理。

我想要完成的内容显示在https://readymade-tv.vercel.app/ （必须在 Firefox 中打开）

此 SVG 的代码可在此处获得： https://gist.github.com/vojtechjurasef7166781ac25aaa4

问题

除了 Firefox 之外，我无法使其在任何其他浏览器中工作。 在 Safari (macOS) 中，文本位于其自身之上。 在 Chrome 中根本没有文字。

在 Firefox 中，在 animation 期间“丢弃”最后一个字母存在小问题 - 您可以在路径的左上角看到它。

谢谢您的帮助！

Answer 1

由于某种原因，使用矩形似乎在其他浏览器中不起作用。 不过，您可以通过将rect替换为外观相同的路径来使其运行。

您还需要将textPath的textLength设置为automatic ，否则 Chrome 中的字母会重叠等。

根据您的代码，这对我有用。 虽然 Chrome 的性能似乎很差：

 <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" > <path d="M180,40 1740,40S1860,40 1860,160L1860,920S1860,1040 1740,1040L180,1040S60,1040 60,920L60,160S60,40 180,40Z" id="runpath" stroke="black" fill="transparent"/> <text textAnchor="right" fill="black" style="font-size: 20px"> <textPath href="#runpath" side="left" textAnchor="right" spacing="auto" startOffset="100%" textLength="auto" > <animate attributeName="startOffset" from="-2.3%" to="0%" begin="0s" dur="2.35s" repeatCount="indefinite" ></animate> ADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADE </textPath> </text> </svg>