Loading ...
Sorry, an error occurred while loading the content.
 

SVG animation events + javascript ?

Expand Messages
  • Jean-Philippe Braun
    Hello, I am trying to get events from a smil animation created dynamically with javascript, but it doesn t work :/ here is my test :
    Message 1 of 2 , Apr 15, 2004
      Hello,

      I am trying to get events from a smil animation created dynamically with
      javascript, but it doesn't work :/

      here is my test :
      <?xml version="1.0" encoding="ISO-8859-1"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg width="400" height="400" onload="init(evt)"
      xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
      a3:scriptImplementation="Adobe">

      <script type="text/ecmascript"
      a3:scriptImplementation="Adobe"><![CDATA[
      function init(evt) {
      var svgns = "http://www.w3.org/2000/svg";
      var rect, animate;
      if (window.svgDocument == null)
      svgDocument = evt.target.ownerDocument;

      rect = svgDocument.createElementNS(svgns, "rect");
      rect.setAttributeNS(null, "y", "45");
      rect.setAttributeNS(null, "width", "10");
      rect.setAttributeNS(null, "height", "10");
      rect.setAttributeNS(null, "fill", "blue");

      animate = svgDocument.createElementNS(svgns, "animate");
      animate.setAttributeNS(null, "attributeName", "x");
      animate.setAttributeNS(null, "from", "0");
      animate.setAttributeNS(null, "to", "50");
      animate.setAttributeNS(null, "dur", "1s");
      animate.setAttributeNS(null, "repeatCount", "1");
      animate.setAttributeNS(null, "onend", "alert('end of
      anim')");

      rect.appendChild(animate);
      svgDocument.documentElement.appendChild(rect);
      }
      ]]></script>
      </svg>

      the anim works but it doesn't display the alert message at the end.

      i try with a "static" version, and it works..

      thanks for your help
      cheers

      ps: sorry for my poor english ;)
    • pilatfr
      ... dynamically with ... You can use parseXML to parse string for animate element str=
      Message 2 of 2 , Apr 15, 2004
        --- In svg-developers@yahoogroups.com, "Jean-Philippe Braun"
        <eon@p...> wrote:
        > Hello,
        >
        > I am trying to get events from a smil animation created
        dynamically with
        > javascript, but it doesn't work :/

        You can use parseXML to parse string for animate element

        str="<animate attributeName='x' from='0' to='50' dur='1'
        repeatCount='1' onend='alert(\"end of anim\")'/>"
        animate = parseXML(str,svgDocument)

        or use addEventListener

        animate.addEventListener("end",alerte,false)
        You have to put alert in function alerte()

        Michel

        > here is my test :
        > <?xml version="1.0" encoding="ISO-8859-1"?>
        > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
        > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
        > <svg width="400" height="400" onload="init(evt)"
        > xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
        > a3:scriptImplementation="Adobe">
        >
        > <script type="text/ecmascript"
        > a3:scriptImplementation="Adobe"><![CDATA[
        > function init(evt) {
        > var svgns = "http://www.w3.org/2000/svg";
        > var rect, animate;
        > if (window.svgDocument == null)
        > svgDocument = evt.target.ownerDocument;
        >
        > rect = svgDocument.createElementNS(svgns, "rect");
        > rect.setAttributeNS(null, "y", "45");
        > rect.setAttributeNS(null, "width", "10");
        > rect.setAttributeNS(null, "height", "10");
        > rect.setAttributeNS(null, "fill", "blue");
        >
        > animate = svgDocument.createElementNS
        (svgns, "animate");
        > animate.setAttributeNS(null, "attributeName", "x");
        > animate.setAttributeNS(null, "from", "0");
        > animate.setAttributeNS(null, "to", "50");
        > animate.setAttributeNS(null, "dur", "1s");
        > animate.setAttributeNS(null, "repeatCount", "1");
        > animate.setAttributeNS(null, "onend", "alert('end of
        > anim')");
        >
        > rect.appendChild(animate);
        > svgDocument.documentElement.appendChild(rect);
        > }
        > ]]></script>
        > </svg>
        >
        > the anim works but it doesn't display the alert message at the end.
        >
        > i try with a "static" version, and it works..
        >
        > thanks for your help
        > cheers
        >
        > ps: sorry for my poor english ;)
      Your message has been successfully submitted and would be delivered to recipients shortly.