动画不是动画而是跳到结束
animation not animating instead jumping to end
我正在尝试使用 SVG 动画标记将路径从半填充更改为完全填充
<svg class="background-gradient" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="grad">
<stop offset="0%" stop-color="rgba(82,181,244,.1)" stop-opacity="1"></stop>
<stop offset="100%" stop-color="rgba(70,215,255,.7)" stop-opacity="1"></stop>
</linearGradient>
</defs>
<path id="scroll-path" d="M0 0 H100 v 100" fill="url(#grad)">
<animate attributeName="d" from="M0 0 H100 v 100" to="M0 0 H100 L100 100 L0 100" dur="1s" repeatCount="indefinite" />
</path>
</svg>
目前它只是从动画的开头跳到结尾,并没有显示我所希望的平滑填充。
有什么想法吗?
要使动画平滑,路径必须具有相同数量和类型的命令。
你的第一个路径有 3 个命令 M H v
您的第二条路径有 4 个命令 M H L L
您需要使用 2 个 L 命令而不是 v 编写第一个路径,或者将第二个路径写为 v 而不是两个 L 命令。
我正在尝试使用 SVG 动画标记将路径从半填充更改为完全填充
<svg class="background-gradient" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="grad">
<stop offset="0%" stop-color="rgba(82,181,244,.1)" stop-opacity="1"></stop>
<stop offset="100%" stop-color="rgba(70,215,255,.7)" stop-opacity="1"></stop>
</linearGradient>
</defs>
<path id="scroll-path" d="M0 0 H100 v 100" fill="url(#grad)">
<animate attributeName="d" from="M0 0 H100 v 100" to="M0 0 H100 L100 100 L0 100" dur="1s" repeatCount="indefinite" />
</path>
</svg>
目前它只是从动画的开头跳到结尾,并没有显示我所希望的平滑填充。
有什么想法吗?
要使动画平滑,路径必须具有相同数量和类型的命令。
你的第一个路径有 3 个命令 M H v
您的第二条路径有 4 个命令 M H L L
您需要使用 2 个 L 命令而不是 v 编写第一个路径,或者将第二个路径写为 v 而不是两个 L 命令。