Grauw’s blog

I updated the SVG example I made earlier, and it now shows a little more action :).

» Look at the updated SVG animation

More importantly than the additional visual effect, I am now using the SVG DOM for the animation, instead of manipulating an attribute, which was kind of an ugly approach.

This is the important part of the Javascript code for the animation:

var d2r = Math.PI / 180;        // degrees to radials conversion factor

function rotate(val) {
	val++;
	
	svg_transform1.setRotate(val*2,105,125);
	svg_transform2.setTranslate(Math.sin(val*8*d2r)*20,Math.cos(val*8*d2r)*20);
	
	setTimeout('rotate(' + val + ')',20);
}

The rotate function shown here takes care of the animation, and when it’s done it calls itself again after 20 milliseconds, with the increased val parameter. During the initialisation I made two transformation objects, and in this function I use the first transformation object to set the rotation of the blue blob to val*2 degrees around the x=105 and y=125 coordinates. The second transformation changes the position of the blob along a circular path as val increases. It’s as easy as that!

Grauw

2 comments [reply]

Comments

Very sweet! by Jacobus at 2006-04-20 09:00

Baie mooi!
Very pretty!

I think the use of SVG and other XML inline is just stunning. Pitty silly IE does not support it, but who still uses that?

Keep it up!

Bye-bye

SVG (and Canvas) in IE by Grauw at 2006-04-22 01:49

Hey Jacobus,

Actually, check out Mark Finkle’s SVG in IE. It uses IE’s proprietary VML language to add (limited) support for SVG. Although not perfect, and I doubt whether it can handle animations, it is certainly nice! Haven’t tried it yet though.

And while you’re at it, you might also want to take a look at ExplorerCanvas, enabling Canvas support in IE, also by means of VML.

» Add a comment…