我有下面的代码，
<div id="akbar">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="400" height="200" viewBox="0 0 400 200">
<g transform="scale(1,-1) translate(0,-200)">
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate attributeName="height"
from="0"
to="100"
dur="0.5s"
fill="freeze" />
</rect>
<rect x="150" y="0" fill="#f70" width="100" height="200">
<animate
attributeName="height"
from="0"
to="200"
dur="0.5s"
fill="freeze" />
</rect>
<rect x="250" y="0" fill="#ec0" width="100" height="150">
<animate
attributeName="height"
from="0"
to="150"
dur="0.5s"
fill="freeze" />
</rect>
</g>
</svg>
</div>
我想为svg矩形设置动画，使其像音乐波一样增长。
我该如何实现？
我需要这种行为
您可以使用
values，keyTimeskeySplines<animate>标签的属性。
我将您的示例仅剥离为单列：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="400" height="200" viewBox="0 0 400 200">
<g transform="scale(1,-1) translate(0,-200)">
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate
attributeName="height"
from="0"
to="100"
dur="1s"
fill="freeze"
values="0; 200; 150; 160; 150; 160"
keyTimes="0; 0.2; 0.4; 0.6; 0.8; 1"
keySplines=".42 0 1 1;
0 0 .59 1;
.42 0 1 1;
0 0 .59 1;
.42 0 1 1;
0 0 .59 1;"
/>
</rect>
</g>
</svg>
由于尚不完善，您可以尝试使用这些属性来更好地调整时间（keySplines尤其是）并使其像音乐波一样多。
在提供的示例中可以看到，移动的单列步是：
我猜想，增加那些重复的百分比数字（83和88）之间的差异将为您带来比我的效果更好的效果（该效果基于75％和80％，更容易计算widht: 200px），但效果接近。
还可以看一下有关SVG动画的CSS技巧文章，它非常详尽，涵盖了有关提及的属性的所有详细信息-以及更多。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句