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>

Answer 2

您只需要将不透明度从1设置为0，如下所示：

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

如何在动画后隐藏svg元素

2 个答案: