我正在使用 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;
}Run Code Online (Sandbox Code Playgroud)
<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: …Run Code Online (Sandbox Code Playgroud)