围绕矩形路径循环 SVG 文本动画

Question

我正在使用 SVG 围绕圆角矩形的路径对文本进行动画处理。这个想法是让文本流不断地围绕矩形移动。

以下是 After Effects 教程视频中的矩形动画示例

但是，当关闭文本的 SVG 路径时，动画根本不会运行，如果我将路径保持打开状态，则文本会在到达末尾时消失，如以下代码片段所示：

html, body {
  background: black;
  margin: 0 auto;
}

.container {
  widht: 100%;
  background: red;
}

.svgwave {
  margin-left: calc(50% - 150px);
  margin-top: 100px;
}

<div class="wrapper">
            <svg class="svgwave" xmlns="http://www.w3.org/2000/svg" width="301" height="301" viewBox="0 0 301 301" style="width:auto; height: auto; overflow: visible;">
                <path id="wavepath" d="M145.5 301.5H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5" style="fill: transparent; stroke: transparent; stroke-width: 1px;"></path>

                <foreignObject x='6' y='6' width='300px' height='300px'>
                    <div
                    style="width: 282px; height: 282px;
                            border-radius: 8px;
                            background-size: contain;
                            border: 4px solid white;
                            display:inline-block; "
                    ></div>
                </foreignObject>
                <text text-anchor="middle" style="text-transform: uppercase; font-family: Arial; font-size: 20px; fill: white;">
                    <textPath style=" fill-opacity: 1" href="#wavepath" side="left" startOffset="0%">
                    <animate attributeName="startOffset" from="30%" to="42%" begin="0s" dur="4s" repeatCount="indefinite"></animate>
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    </textPath>
                </text>
            </svg>

        </div>

• 使用 SVG 实现此动画的最佳方式是什么？
• 有没有其他方法可以用 Javascript 来实现这一点？

Answer 1

如果您扩展路径并添加 textLength 设置以确保文本完美换行 - 并调整一些其他内容，您可以使其看起来更好。仍然有微小的接缝抖动，但不是那么明显。

html, body {
  background: black;
  margin: 0 auto;
}

.container {
  widht: 100%;
  background: red;
}

.svgwave {
  margin-left: calc(50% - 150px);
  margin-top: 100px;
}

            <svg class="svgwave" xmlns="http://www.w3.org/2000/svg" width="301" height="301" viewBox="0 0 301 301" style="width:auto; height: auto; overflow: visible;">
                <path id="wavepath" d="M145.5 301.5H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5 H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5 H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5 H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5" style="fill: transparent; stroke: transparent; stroke-width: 1px;" ></path>

                <foreignObject x='6' y='6' width='300px' height='300px'>
                    <div
                    style="width: 282px; height: 282px;
                            border-radius: 8px;
                            background-size: contain;
                            border: 4px solid white;
                            display:inline-block; "
                    ></div>
                </foreignObject>
                <text text-anchor="left" style="text-transform: uppercase; font-family: Arial; font-size: 20px; fill: white;">
                    <textPath style=" fill-opacity: 1" href="#wavepath" side="left" startOffset="0%" textLength="1175">
                    <animate attributeName="startOffset" from="20%" to="42%" begin="0s" dur="12s" repeatCount="indefinite"></animate>
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    First <tspan style="fill: #DED279;">Second</tspan> 
                    </textPath>
                </text>
            </svg>