SVG的动画不起作用答案

【问题标题】：Animation of SVG doesnt workSVG的动画不起作用
【发布时间】：2016-10-24 20:54:32
【问题描述】：

我对 SVG 代码有一个挑战，我无法获得我想要的结果。

我想要 row_five 的反面。该行应从底部延伸到顶部。

代码：

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(216, 216, 216);">
<rect x="00" y="90" width="20" height="10" style="fill: rgb(216, 216, 216);" id="row_one"/>
<rect x="30" y="70" width="20" height="30" style="fill: rgb(216, 216, 216);" id="row_two"/>
<rect x="60" y="50" width="20" height="50" style="fill: rgb(216, 216, 216);" id="row_three"/>
<rect x="90" y="30" width="20" height="70" style="fill: rgb(216, 216, 216);" id="row_four"/>
<rect x="120" y="10" width="20" height="90" style="fill: rgb(216, 216, 216);" id="row_five">
    <animate attributeName="height" from="0" to="90" begin= "0s" dur="1s"/>
</rect> 
</svg>

【问题讨论】：

在 y 和高度的同时设置动画。
你的意思是这样的？ <rect x="120" y="10" width="20" height="90" style="fill: rgb(216, 216, 216);" id="row_five"> <animate attributeName="height" from="0" to="90" begin= "0s" dur="1s"/> <animate attributeName="<" from="0" to="10" begin= "0s" dur="1s"/> </rect> 和之前的结果一样

标签： animation svg

【解决方案1】：

正如罗伯特所说，随着身高的增加，您会移动 Y 位置。 SVG 文件中的 (0,0) 位于左上角。所以你实际上需要减少 Y，而不是增加它。

您的第五个条形图从 y=10 开始，高度为 90。因此条形图的底部位于 y=100。所以你需要将y 的动画从 100 降到 10。

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(216, 216, 216);">
<rect x="00" y="90" width="20" height="10" style="fill: rgb(216, 216, 216);" id="row_one"/>
<rect x="30" y="70" width="20" height="30" style="fill: rgb(216, 216, 216);" id="row_two"/>
<rect x="60" y="50" width="20" height="50" style="fill: rgb(216, 216, 216);" id="row_three"/>
<rect x="90" y="30" width="20" height="70" style="fill: rgb(216, 216, 216);" id="row_four"/>
<rect x="120" y="10" width="20" height="90" style="fill: rgb(216, 216, 216);" id="row_five">
    <animate attributeName="y" from="100" to="10" begin= "0s" dur="1s"/>
    <animate attributeName="height" from="0" to="90" begin= "0s" dur="1s"/>
</rect> 
</svg>

【讨论】：