javascript - Rotate an oval SVG object -

i'm trying animate oval shaped image rotate @ fixed angle outline rotates around area without changing area's shape.

how do that? can use 1 image or need several small images following oval shaped path?

this i've done (jsfiddle) , can see area changing shape accordingly rotation

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink">   <image x="20" y="20" width="300" height="80"      xlink:href="http://i.imgur.com/gtlsqx4.png">   <animatetransform attributetype="xml"                     attributename="transform"                     type="rotate"                     from="0 180 50"                     to="360 180 50"                     dur="4s"                     repeatcount="indefinite"/> </image>   </svg> 

image more clarity

i'm not graphics genius i'm pretty sure can't done have. if take away animation , examine png itself, you'll notice gear distorted in fixed, two-point perspective manner-- gear stretching "away" us, viewer.

but image 2d, , no matter how rotate in svg or css or canvas, gear stretch same way.

if there solution, involve serious image warping @ key points in animation, , performing warps on rasterized image degrade visual fidelity.

here alternatives:

• there's old stand-by: gif animation of 3d animation of gear performing full rotation.
• you can slice 3d animation series of 2d frames, smash them sprite sheet, animate javascript.
• you use flash.
• you experiment webgl.