Moving the origin

A key reason to want to move the origin is to control the centre of rotation of something. In this example a pointer rotates around its wide end.

As a way of making it obvious which point it is rotating around I have put it inside a circle.

Another feature I have put in this example is to draw Controls in the graphic itself. This is instead of using the ones in html. The svg controls can still be interactive.

One of the many possibilities this opens up is creating controls which are unusual shapes.

One of the interesting things I discovered while creating this example is that SVG interactivity only works when the SVG is embedded in a html page. In an svg file, it seems, 'onClick' doesn't work!

On the other hand I think I have an example where hovering with the mouse has an effect. I also think that holding the mouse down activates a property called 'active'.

Another point is that in this example all the style used for the animation is in the SVG itself - not in the head of the html as in most of my other examples.

Start Stop