javascript - 如何在动画后隐藏 svg 元素

Question

我试图在动画完成后隐藏我的 SVG 中的图像。我怎样才能做到这一点？

这是我目前所拥有的:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g> 
    <image id="image1" x="65" y="155">
        /*Step1.Animation*/
        <animate id="startid" dur="1.5s" attributeName="y" values="155; 135;" begin="indefinite" />
    </image>
    <image id="image2" x="75" y="5">
        /*Step2.Animation*/
        <animate id="move" dur="1.5s" attributeName="y" values="5; 20;" begin="startid.begin" />
        /*Step3. Doesn`t working !!!*/
        <animate dur="0.1s" attributeName="visibility" from="visible" to="hidden" begin="move.end" repeatCount="0" />
    </image>
</g>
</svg>

这里是 an example

Answer 1

试试这个语句:

    <animate dur="1" attributeName="opacity" from="1" to="0" begin="move.end" repeatCount="0" fill="freeze" />

您的示例已编辑 http://jsfiddle.net/whbjw6g2/

   <svg version="1.1" width="184" height="228" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 185 230">
<rect x="0" y="0" style="fill:rgb(30,176,233)" width="184" height="228" ></rect>
<g> 
    <image id="image1" x="65" y="155" width="30" height="50"  xlink:href="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/cursor.png">
        /*Step1.Animation*/
        <animate id="startid" dur="1.5s" attributeName="y" values="155; 135;" begin="indefinite" />
    </image>
    <image id="image2" x="75" y="5" width="30" height="50"  xlink:href="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/cursor.png">
        /*Step2.Animation*/
        <animate id="move" dur="1.5s" attributeName="y" values="5; 20;" begin="startid.begin" />
        /*Step3. Doesn`t working !!!*/
        <animate dur=".1" attributeName="opacity" from="1" to="0" begin="move.end" repeatCount="0" fill="freeze" />
    </image>
</g>
</svg>