Question

我希望动画<rect>的宽度，延迟为1s。动画在1秒后正确启动，但直到<rect>完全可见 - 这不是我的意思！它必须是不可见的，直到矩形开始增长......

代码：

<rect x="25.847" y="161.813" fill="#007188" stroke="#FFFFFF" width="211.671" height="14.014">
        <animate attributeName="width" attributeType="XML" begin="1s" dur="2s"  
            fill="freeze" from="0" to="211.671"/>
    </rect>

怎么回事？

Answer 1

你可以在另一个动画开始时制作一个动画。像这样......

<rect x="25.847" y="161.813" fill="#007188" stroke="#FFFFFF" width="211.671" height="14.014" visibility="hidden">
    <animate id="a1" attributeName="width" attributeType="XML" begin="1s" dur="2s"  
        fill="freeze" from="0" to="211.671"/>
    <set attributeName="visibility" from="hidden" to="visible" begin="a1.begin"/>
</rect>

或者你可以让第二个动画从1开始

SVG - 动画延迟，元素在宽度开始增长之前可见

1 个答案: