Блог

Главная - Вопросы по программированию - Анимация SVG не работает

Анимация SVG не работает

#animation #svg

#Анимация #svg

Вопрос:

у меня проблема с 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>

Комментарии:

1. Анимируйте букву y одновременно с высотой.

2. Вы имеете в виду что-то вроде этого? <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> Это дает те же результаты, что и раньше

Ответ №1:

Как сказал Роберт, по мере увеличения высоты вы перемещаете положение Y. (0,0) в файлах SVG находится вверху слева. Таким образом, вам на самом деле нужно уменьшить значение 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>