In SVG map， animate ,animateTransform and animateMotion can work normally when the attribute
is not like begin="indefinite". Then we can set document.getElementById('A').endElement().
,the animation will stop. When we set document.getElementById('A').beginElement(), it stops
however.
But when the attribute is "begin=indefinite" firstly , the animation is static. Then we
can set document.getElementById('A').beginElement(). ,the animation will not work.
So the endElement() can work . The beginElement() catn't work.
I have attached the test code as follows:
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en">
<title>beginElement/endElement test</title>
<script type="text/ecmascript"><![CDATA[
function endAnimation (animationElement) { if (animationElement != null && typeof
animationElement.endElement != 'undefined') { animationElement.endElement(); }}
function beginAnimation (animationElement) { if (animationElement != null && typeof
animationElement.beginElement != 'undefined') { animationElement.beginElement(); }}]]></script>
<ellipse id="E" cx="150" cy="75" rx="10" ry="40" fill="blue"><animate id="A" attributeName="rx"
begin="indefinite" end="indefinite" dur="4s" values="10;110;10" repeatCount="indefinite"/></ellipse>
<g id="G" onclick="beginAnimation(document.getElementById('A'));"><rect x="85" y="130"
height="20" width="60" fill="green"/><text x="90" y="148" font-size="20" fill="white">GO</text></g>
<g id="R" onclick="endAnimation(document.getElementById('A'));"><rect x="150" y="130"
height="20" width="60" fill="red"/><text x="155" y="148" font-size="20" fill="white">STOP</text></g>
</svg>
Respect your answer!
Thanks!
_________________________________________________________________
中国十大热门旅游景点
http://search.msn.com/results.aspx?q=%E4%B8%AD%E5%9B%BD%E5%8D%81%E5%A4%A7%E9%A3%8E%E6%99%AF&mkt=zh-CN&form=QBRE
|