如何在JavaScript中触发SVG动画（HTML）

Question

I am animating a rect in html/svg. I have also created a function in javascript and I would like the animation to begin only when the function is called.

here's my code:

<svg>
<rect onclick="rightSide()" id="rightGreen" x="512" y="0" width="100%" height="768" fill="black" display="block">
       <animate id="openright"
                   attributeName="x"
                   from="512"
                   to="1536"
                   dur="5.5s"
                   repeatCount="1"
                   begin="indefinite"/>
    </rect>
</svg>

Everything works fine, however i need it to start when a function is called.?

Answer 1

您在<animate>元素对象上调用beginElement() 。

document.getElementById("openright").beginElement()