Question

我对SVG-Code有挑战，我无法得到我想要的结果。

我想要与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，而不是增加它。

你的第五个小节从y = 10开始，高度为90.所以小节的底部是y = 100。因此，您需要将y从100降低到10。

＆＃13;

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

＆＃13;

SVG的动画不起作用

1 个答案: