Drehen eines ovalen SVG-Objekts

Question

Ich versuche, mein ovales Bild so zu animieren, dass es sich in einem festen Winkel dreht, so dass sich der Umriss um einen Bereich dreht, ohne die Form des Bereichs zu ändern.

Wie mache ich das? Kann ich nur ein Bild verwenden oder brauche ich mehrere kleine Bilder, die einem ovalen Pfad folgen?

Das ist, was ich (jsfiddle) gemacht haben, wie Sie den Bereich der Drehung ändert

<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> 

entsprechend Form sehen

Image for more clarity

Answer 1

Ich bin kein Genie Grafik, aber ich Ich bin mir ziemlich sicher, dass das nicht mit dem gemacht werden kann, was Sie haben. Wenn du die Animation wegnimmst und das PNG selbst begutachtest, wirst du feststellen, dass das Getriebe bereits in einer festen Form verzerrt ist - das Getriebe dehnt sich "weg" von uns, dem Betrachter.

Aber das Bild selbst ist 2D, und egal, wie Sie es in SVG oder CSS oder Canvas drehen, wird das Zahnrad immer die gleiche Strecke dehnen.

Wenn es eine Lösung gibt, würde dies zu schwerwiegenden Bildverzerrungen an wichtigen Punkten der Animation führen, und das Ausführen von Warps auf einem gerasterten Bild würde immer die visuelle Wiedergabetreue beeinträchtigen.

Hier sind einige Alternativen:

• Es ist die gute alte Stand-by: GIF-Animation einer 3D-Animation des Getriebes eine volle Umdrehung ausführt.
• Sie können eine 3D-Animation in eine Reihe von 2D-Frames zerlegen, diese dann in ein Sprite-Blatt zerlegen und anschließend mit JavaScript animieren.
• Sie könnten Flash verwenden.
• Sie könnten mit WebGL experimentieren.

Answer 2

Spaß Frage. Ich löste es, indem ich einen äußeren Behälter mit einer Transformationsmatrix schrägstellte und dann das innere Bild rotierte. Ihre svg Animation ist ein wonky dafür, so habe ich einen anderen Zahn von Schrift genial:

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

Wie andere gesagt haben, ist Ihr Zahn gezogen in Perspektive, so können Sie nicht normale Rotation verwenden und erwarten, dass es richtig aussieht.

Was Sie tun müssen, ist das Zeichnen der SVG als ein flaches Zahnrad und dann können Sie eine CSS 3D-Transformation verwenden, um eine perspektivische Projektion zum rotierenden Zahnrad hinzuzufügen.

Hier ist ein funktionierendes Beispiel:

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>