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

Question

我正在使用 SVG 为圆角矩形路径周围的文本添加动画效果。这个想法是让文本流不断地围绕矩形移动。

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>

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

Loop SVG text animation around rectangle path

javascript

animation

svg