Uploaded image for project: 'Batik'
  1. Batik
  2. BATIK-727

It could not start and stop the element's animation with beginElement and endElement

    XMLWordPrintableJSON

    Details

    • Type: Bug
    • Status: Resolved
    • Resolution: Fixed
    • Affects Version/s: 1.7
    • Fix Version/s: None
    • Component/s: SVG Viewer
    • Labels:
      None
    • Environment:
      Operating System: Windows Server 2003
      Platform: PC

      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>

        Attachments

          Activity

            People

            • Assignee:
              batik-dev@xmlgraphics.apache.org Batik Developer's Mailing list
              Reporter:
              friendggz@hotmail.com jason
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: