更新时间:2023-10-23 22:51:16
在底部向左移动的同时,使用另一个变换将整个事物向右移动.
Use another transform to move the whole thing to the right at the same time as the bottom moves left.
<svg xmlns="http://www.w3.org/2000/svg" width="102" height="102" viewBox="-50 -50 102 102">
<g>
<rect width="10%" height="50%"
style="fill:none; stroke:red; stroke-with:3;">
<animateTransform
attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
id="fallen"/>
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
from="0"
to="20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
additive="sum"/>
</rect>
</g>
</svg>