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

[svg-developers] triggering JavaScript function from SMIL

Expand Messages
  • ddailey
    Does someone know if one can trigger a JavaScript function when a SMIL animation terminates? Basically, I d like a moving object to remove itself from the SVG
    Message 1 of 4 , Dec 9, 2006
    • 0 Attachment
      Does someone know if one can trigger a JavaScript function when a SMIL animation terminates? Basically, I'd like a moving object to remove itself from the SVG DOM when its animation completes.

      I thought I had done this once but if I did it is now forgotten.

      David

      [Non-text portions of this message have been removed]
    • Cameron McCormack
      Hi David. ... Yes you can do this by attaching an event handler to the SMIL endEvent event. Try:
      Message 2 of 4 , Dec 9, 2006
      • 0 Attachment
        Hi David.

        ddailey:
        > Does someone know if one can trigger a JavaScript function when a SMIL
        > animation terminates? Basically, I'd like a moving object to remove
        > itself from the SVG DOM when its animation completes.
        >
        > I thought I had done this once but if I did it is now forgotten.

        Yes you can do this by attaching an event handler to the SMIL endEvent
        event. Try:

        <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="100">
        <animate attributeName="r" to="50" begin="2s" dur="3s"
        onend="c = evt.target.parentNode;
        c.parentNode.removeChild(c)"/>
        </circle>
        </svg>

        Cameron

        --
        Cameron McCormack, http://mcc.id.au/
        xmpp:heycam@... ▪ ICQ 26955922 ▪ MSN cam@...
      • ddailey
        ... Yes you can do this by attaching an event handler to the SMIL endEvent event. Try:
        Message 3 of 4 , Dec 10, 2006
        • 0 Attachment
          Cameron wrote:
          ----------------------
          Yes you can do this by attaching an event handler to the SMIL endEvent
          event. Try:

          <svg xmlns="http://www.w3.org/2000/svg">
          <circle cx="100" cy="100" r="100">
          <animate attributeName="r" to="50" begin="2s" dur="3s"
          onend="c = evt.target.parentNode;
          c.parentNode.removeChild(c)"/>
          </circle>
          </svg>
          -----------------------------

          Thanks Cameron. The above works for me in IE and Opera. However, if I try to do it with a dynamically built animation:

          function makeAnimTrans(type,i,x,dur){
          anim = D.createElementNS(xmlns,"animateTransform");
          anim.setAttribute("begin",(3*Math.random())+"s")
          anim.setAttribute("onend","stopAn(evt)")
          [...]

          The onend event is not triggered in IE -- it is in Opera. I suspect this is a bug in IE/ASV. I now recall that the last time I tried to do something like this I ended up having to make a dangling animation tag and then clone it to get the onend to fire.

          [Non-text portions of this message have been removed]
        • Donna Antle
          Hi all, I m doing something similar to the example below and using the onend attribute to call a function in an animate element. This works in IE with ASV,
          Message 4 of 4 , Jul 22, 2011
          • 0 Attachment
            Hi all,

            I'm doing something similar to the example below and using the onend attribute to call a function in an animate element. This works in IE with ASV, Firefox and Opera, but fails to fire the event when running in webkit browsers (Chrome and Safari). Anyway to make something like this work in these browsers?

            Thanks,
            Donna

            --- In svg-developers@yahoogroups.com, Cameron McCormack <cam@...> wrote:
            >
            > Hi David.
            >
            > ddailey:
            > > Does someone know if one can trigger a JavaScript function when a SMIL
            > > animation terminates? Basically, I'd like a moving object to remove
            > > itself from the SVG DOM when its animation completes.
            > >
            > > I thought I had done this once but if I did it is now forgotten.
            >
            > Yes you can do this by attaching an event handler to the SMIL endEvent
            > event. Try:
            >
            > <svg xmlns="http://www.w3.org/2000/svg">
            > <circle cx="100" cy="100" r="100">
            > <animate attributeName="r" to="50" begin="2s" dur="3s"
            > onend="c = evt.target.parentNode;
            > c.parentNode.removeChild(c)"/>
            > </circle>
            > </svg>
            >
            > Cameron
            >
            > --
            > Cameron McCormack, http://mcc.id.au/
            > xmpp:heycam@... ▪ ICQ 26955922 ▪ MSN cam@...
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.