SVGのアニメーションはうまくいきません

Question

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

Answer 1

ロバートは、あなたが高さを成長するにつれて、あなたはY位置を移動し、言ったように。 SVGファイルの（0,0）は左上にあります。実際にはを減らす必要があります。 Yを大きくしないでください。

5番目のバーはy = 10で始まり、高さが90です。したがって、バーの下端はy = 100です。だから、高さと同じ時間でyをアニメーション化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>