W3C home > Mailing lists > Public > www-svg@w3.org > September 2000

combining javascript and declarative animation?

From: Eric Wong <egwong@netcom.com>
Date: Fri, 22 Sep 2000 12:45:51 -0700 (PDT)
Message-Id: <200009221945.MAA29401@netcom.com>
To: www-svg@w3.org
Hi,

I was wondering if it was possible to combine javascript with declarative
animation.  For example, I want to use javascript to create an animated
circle, so I tried this:

        function _new_circle( x, y ) {
            var circle = root.createElement('circle');
            circle.setAttribute( 'cx', x );
            circle.setAttribute( 'cy', y );
            circle.setAttribute( 'r', 30 );
            circle.setAttribute( 'style', 'fill: black; opacity: 0.2;' );

            var anim = root.createElement('animate');
            anim.setAttribute( 'attributeName', 'opacity' );
            anim.setAttribute( 'attributeType', 'CSS' );
            anim.setAttribute( 'from', '0.2' );
            anim.setAttribute( 'to', '0.8' );
            anim.setAttribute( 'begin', '1s' );

            circle.appendChild( anim );

            return circle;
        }

but when I put the returned circle-element into the svg (I appendChild()
it to an empty g-element), the circle is painted onto the canvas (good!),
but it just sits there (bad), ignoring the animate.  

The other option (which works) is to simply use javascript itself to
animate the circle, but I figured that it would be nice if I could get
someone else to do my work for me :)

I'm using Windows, IE 5.5 and the Adobe plug-in.

Thanks,
Eric
Received on Friday, 22 September 2000 16:10:42 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 5 November 2012 23:52:48 GMT