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

Question

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

Here's an example of the rectangle animation in this tutorial video for 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>