小编Jua*_*eal的帖子

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

我正在使用 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)

javascript animation svg

2
推荐指数
1
解决办法
800
查看次数

标签 统计

animation ×1

javascript ×1

svg ×1