Ruota un oggetto SVG ovale

Question

Sto tentando di animare la mia immagine di forma ovale per ruotare a un angolo fisso in modo che il contorno ruoti attorno a un'area senza modificare la forma dell'area.

Come faccio? Posso usare solo un'immagine o ho bisogno di più immagini piccole seguendo un percorso ovale?

questo è quello che ho fatto (jsfiddle), come si può vedere l'area sta cambiando forma di conseguenza per la rotazione

<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

io non sono un genio grafica, ma io' Sono piuttosto sicuro che questo non può essere fatto con quello che hai. Se togli l'animazione ed esamini il PNG stesso, noterai che l'ingranaggio è già distorto in modo fisso, two-point perspective - la marcia si sta "allontanando" da noi, l'osservatore.

Ma l'immagine stessa è 2D, e indipendentemente da come la si ruota in SVG o CSS o Canvas, la marcia si allungherà sempre allo stesso modo.

Se esiste una soluzione, ciò comporterebbe una seria deformazione dell'immagine nei punti chiave dell'animazione e l'esecuzione di orditi su un'immagine rasterizzata degraderà sempre la fedeltà visiva.

Ecco alcune alternative:

• c'è il buon vecchio stand-by: GIF animazione di un'animazione 3D della marcia eseguendo una rotazione completa.
• È possibile suddividere un'animazione 3D in una serie di fotogrammi 2D, quindi romperli insieme in un foglio sprite, quindi animarlo con JavaScript.
• È possibile utilizzare Flash.
• È possibile sperimentare con WebGL.

Answer 2

Domanda divertente. L'ho risolto inclinando un contenitore esterno usando una matrice di trasformazione e quindi ruotando l'immagine interna. Il tuo svg animazione è un wonky per questo, quindi ho usato un ingranaggio diverso dal carattere impressionante:

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> 

Answer 3

Come altri hanno detto, il vostro ingranaggio è disegnato in prospettiva, quindi non è possibile utilizzare la rotazione normale e aspettarsi che sia corretta.

Quello che devi fare è disegnare l'SVG come un ingranaggio piatto e quindi puoi utilizzare una trasformazione CSS 3D per aggiungere una proiezione prospettica all'ingranaggio rotante.

Ecco un esempio di lavoro:

svg 
 
{ 
 
    margin: 100px; 
 
    transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    -webkit-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    -moz-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    -o-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    -ms-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
}

<svg width="100" height="100" viewBox="0 0 100 100"> 
 
    <g stroke="black" fill="none" transform="translate(50,50)"> 
 
     <g> 
 
      <circle r="38" stroke-width="8"/> 
 
      <line x1="38" x2="49" stroke-width="16"/> 
 
      <line x1="38" x2="49" stroke-width="16" transform="rotate(45)"/> 
 
      <line x1="38" x2="49" stroke-width="16" transform="rotate(90)"/> 
 
      <line x1="38" x2="49" stroke-width="16" transform="rotate(135)"/> 
 
      <line x1="38" x2="49" stroke-width="16" transform="rotate(180)"/> 
 
      <line x1="38" x2="49" stroke-width="16" transform="rotate(225)"/> 
 
      <line x1="38" x2="49" stroke-width="16" transform="rotate(270)"/> 
 
      <line x1="38" x2="49" stroke-width="16" transform="rotate(315)"/> 
 
      <animateTransform attributeType="xml" attributeName="transform" 
 
           type="rotate" from="0" to="360" 
 
           dur="4s" repeatCount="indefinite"/> 
 
     </g> 
 
    </g> 
 
</svg>