我有一个SVG，我正在尝试用填充从下到上制作动画。我希望它以颜色代码#ddd开始，我希望它以#ccc底部填充结束，持续时间为 1 秒。我在让它正常工作时遇到了问题，因为它看起来有点奇怪。
这就是我目前所得到的。
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="#ddd"/>
<stop offset="50%" stop-color="#ccc">
<animate attributeName="offset" values="0;1;0" dur="1s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="1" stop-color="#ccc">
<animate attributeName="offset" values="0;1;0" dur="1s" begin="0s"/>
</stop>
</linearGradient>
<g transform="translate(-1161.000000, -558.000000)" fill="url(#lg)" id="current-net-wealth">
<g transform="translate(437.000000, 475.000000)">
<g id="houses" transform="translate(340.000000, 83.000000)">
<g id="house" transform="translate(384.000000, 0.000000)">
<polygon id="Path" points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
是否需要向linearGradiant动画添加额外的停靠点？
像这样的东西。
- 如果你想要 1 秒的持续时间，那么这就是要写的
- 您的值使填充再次上升和下降
- fill="freeze" 使动画值在其持续时间完成后保留
- 你的颜色与你说你想要的颜色不匹配
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="#ccc"/>
<stop offset="0%" stop-color="#ccc">
<animate attributeName="offset" to="100%" dur="1s" begin="0s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="#ddd">
<animate attributeName="offset" to="100%" dur="1s" begin="0s" fill="freeze"/> </stop>
</linearGradient>
<g transform="translate(-1161.000000, -558.000000)" fill="url(#lg)" id="current-net-wealth">
<g transform="translate(437.000000, 475.000000)">
<g id="houses" transform="translate(340.000000, 83.000000)">
<g id="house" transform="translate(384.000000, 0.000000)">
<polygon id="Path" points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>