Question

我正在尝试使用SVG animate标签将路径从半填充更改为完整填充

        <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>

目前它只是从动画的开头到结尾跳转，并没有显示我希望介于两者之间的平滑填充。

有什么想法吗？

Answer 1

要使动画平滑，路径必须具有相同数量和类型的命令。

您的第一条路径有3个命令M H v

你的第二条路径有4个命令M H L L

您需要使用2 L命令而不是v或秒编写第一个路径作为v而不是两个L命令。

动画不动画而是跳到结尾

1 个答案: