Rotate an oval SVG object

Question

I'm trying to animate my oval shaped image to rotate at a fixed angle so that the outline rotates around an area without changing the area's shape.

How do I do that? Can I use only one image or do I need several small images following an oval shaped path?

This is what i've done (jsfiddle) , as you can see the area is changing shape accordingly to the 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 for more clarity

Answer 1

I'm not a graphics genius but I'm pretty sure this can't be done with what you have. If you take away the animation and examine the PNG itself, you'll notice the gear is already distorted in a fixed, two-point perspective manner-- the gear is stretching "away" from us, the viewer.

But the image itself is 2D, and no matter how you rotate it in SVG or CSS or Canvas, the gear will always stretch the same way.

If there is a solution, it would involve some serious image warping at key points in the animation, and performing warps on a rasterized image will always degrade the visual fidelity.

Here are some alternatives:

• There's the good old stand-by: GIF animation of a 3D animation of the gear performing a full rotation.
• You can slice up a 3D animation into a series of 2D frames, then smash them together into a sprite sheet, then animate it with JavaScript.
• You could use Flash.
• You could experiment with WebGL.

Answer 2

Fun question. I solved it by skewing an outside container using a transform matrix and then rotating the inner image. Your svg animation is a wonky for this, so I used a different cog from font awesome:

http://jsfiddle.net/psd32q68/2/

div{
    font-size:84px;
    margin-top:50px;
    margin-left:150px;
transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-webkit-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-moz-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-o-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-ms-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);


}
span{
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

--

   <div>
        <span class="fa fa-cog"></span>
    </div>