[BATIK-727] It could not start and stop the element's animation with beginElement and endElement

• Type: Bug
• Status: Resolved
• Resolution: Fixed
• Affects Version/s: 1.7
• Component/s: SVG Viewer
• Environment: Operating System: Windows Server 2003; Platform: PC
• Assignee: Batik Developer's Mailing list
• Reporter: jason
• Created: 26/Apr/07 00:30
• Updated: 26/Sep/07 17:08
• Resolved: 26/Sep/07 17:08

Description

In SVG mapC 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 know pauseAnimations() can pause all the animations in svg. The function
unpauseAnimations() could restart all the animations. But is can't control some
element. So i need to user beginElement().

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>