Rotation des chemins d'ellipse SVG autour de l'axe le plus long

Question

J'ai donc this logo écrit en SVG. J'essaye de faire pivoter des ellipses groupées autour de leur plus grand axe, pour créer l'illusion de rotation 3D.

.svg-spinner3 { 
    -webkit-animation: rotation 2s infinite linear; 
    -moz-animation: rotation 2s infinite linear; 
    -o-animation: rotation 2s infinite linear; 
    animation: rotation 2s infinite linear; 
    transform-origin: 50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
} 

les faisant tourner autour du centre semble être easy, mais je ne peux pas sembler comprendre comment les faire pivoter (ou au moins l'inclinaison/réduire vers l'axe jusqu'à ce qu'ils deviennent une ligne, puis de nouveau) .

Est-ce trop difficile à faire? Gardez à l'esprit que je suis un débutant SVG complet.

Merci!

Answer 1

Il semble donc que je pouvais utiliser Rotate3D pour faire exactement ce que je voulais.

.svg-spinner3 { 
      animation: rotation3 4s infinite linear; 
      transform-origin: 50% 50%; 
      -webkit-transform-origin: 50% 50%; 
      -moz-transform-origin: 50% 50%; 
     } 

     @-webkit-keyframes rotation3 { 
      from { 
       -webkit-transform: rotate3d(0, 0, 0, 0deg); 
      } 
      to { 
       -webkit-transform: rotate3d(10, 100, 0, 360deg); 
      } 
     } 

https://jsfiddle.net/t8ozqbdf/2/ Voici une partie de la solution.

Answer 2

Vous ne pouvez pas faire de transformations 3D sur les éléments à l'intérieur d'un fichier SVG. Vous ne pouvez donc pas tourner autour de l'axe vertical (Y).

Vous devez simuler la rotation en redimensionnant l'ellipse dans une seule direction. Puis sauvegarder à nouveau.

Je déconseille également d'utiliser transform-origin: 50% 50%. Les valeurs de pourcentage fonctionnent différemment d'un navigateur à l'autre. Chrome se comportera comme vous le souhaitez, mais cette manière est en réalité contraire à la spécification. Utilisez les coordonnées absolues pour le centre de rotation. Pour votre forme, l'équivalent de (50%, 50%) semble être environ (230.7, 198.4).

donc ce que nous devons faire à l'échelle sur l'axe en rotation des ellipses, est à: 1. Faire tourner l'ellipse à la verticale 2. échelle vers le haut ou vers le bas comme nécessaire 3. Faites tourner l'ellipse à sa rotation d'origine

Pour l'exemple d'ellipse que j'ai choisi ci-dessous, l'angle que nous devions utiliser était de 28 degrés. Donc, notre transformation est:

transform: rotate(28deg) scale(0.01, 1) rotate(-28deg); 

Sachez que la mise à l'échelle par 0 n'est pas autorisée. Vous devez donc utiliser une très petite valeur pour l'échelle, au lieu de zéro.

Notes de

Vos formes identiques ont tous un transform sur les existants (translate(-152.27, -120.27)). Pour rendre les choses moins compliquées, j'ai placé toutes les ellipses dans un groupe parent et déplacé la transformation commune vers ce groupe.

Enfin, notez qu'il existe une autre complication. Lorsque vous effectuez une mise à l'échelle comme celle-ci, vous ne faites pas que mettre à l'échelle la largeur de l'ellipse, vous redimensionnez également la largeur des lignes d'ellipse. Cela peut détruire l'illusion d'une rotation 3D correcte, lorsque vous commencez à l'animer.

.rotate-and-scale { 
 
    transform-origin: 230.7px 198.4px; 
 
    transform: rotate(28deg) scale(0.01, 1) rotate(-28deg); 
 
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 500.47 500.47"> 
 
     <defs> 
 
      <style> 
 
       .cls-12, 
 
       .cls-8 { 
 
        fill-rule: evenodd; 
 
       } 
 

 
       .cls-8 { 
 
        fill: url(#radial-gradient-8); 
 
       } 
 

 
       .cls-12 { 
 
        fill: url(#radial-gradient-12); 
 
       } 
 

 
      </style> 
 
      <radialGradient id="radial-gradient" cx="232.26" cy="170.66" r="36.06" gradientTransform="translate(-138.19 -72.22) scale(1.59)" 
 
       gradientUnits="userSpaceOnUse"> 
 
       <stop offset="0.35" stop-color="#00aeef" /> 
 
       <stop offset="1" stop-color="#00609c" /> 
 
      </radialGradient> 
 
      <radialGradient id="radial-gradient-8" cx="232.4" cy="170.47" r="38.82" xlink:href="#radial-gradient" /> 
 
      <radialGradient id="radial-gradient-12" cx="231.93" cy="170.21" r="48.97" xlink:href="#radial-gradient" /> 
 
     </defs> 
 
     <title>fadsf</title> 
 

 
     <g transform="translate(-152.27 -120.27)"> 
 
     <path class="svg-spinner0 cls-12" d="M175,143a77.74,77.74,0,1,0,55-22.77A77.26,77.26,0,0,0,175,143Zm.67,109.26A76.8,76.8,0,1,1,230,274.78,76.34,76.34,0,0,1,175.7,252.29Z" /> 
 

 
     <path class="svg-spinner2 cls-8" d="M248.31,129c-8.67,2.55-18.08,8.5-27.18,17.22a137.76,137.76,0,0,0-25,33.25c-9.92,18.15-15.7,37.18-16.23,53.57s4.28,28.4,13.57,33.48c5.52,3,12.14,3.42,19.69,1.22,8.68-2.55,18.08-8.49,27.18-17.21a137.87,137.87,0,0,0,25-33.26,138.19,138.19,0,0,0,14.52-39,90.29,90.29,0,0,0,1.76-17,53.88,53.88,0,0,0-2-15.13c-2.21-7.54-6.13-12.9-11.65-15.91S255.85,126.84,248.31,129ZM194,265.73c-18.61-10.18-17.25-48.65,3-85.77a136.86,136.86,0,0,1,24.8-33c9-8.61,18.25-14.48,26.78-17,7.29-2.14,13.68-1.76,19,1.14s9.06,8.06,11.2,15.33c2.51,8.55,2.57,19.51.18,31.72a137.57,137.57,0,0,1-14.41,38.72h0a137.48,137.48,0,0,1-24.8,33c-9,8.6-18.26,14.48-26.79,17C205.63,269,199.25,268.63,194,265.73Zm71.38-48.41Z" /> 
 

 
     <path class="rotate-and-scale" fill="red" d="M248.31,129c-8.67,2.55-18.08,8.5-27.18,17.22a137.76,137.76,0,0,0-25,33.25c-9.92,18.15-15.7,37.18-16.23,53.57s4.28,28.4,13.57,33.48c5.52,3,12.14,3.42,19.69,1.22,8.68-2.55,18.08-8.49,27.18-17.21a137.87,137.87,0,0,0,25-33.26,138.19,138.19,0,0,0,14.52-39,90.29,90.29,0,0,0,1.76-17,53.88,53.88,0,0,0-2-15.13c-2.21-7.54-6.13-12.9-11.65-15.91S255.85,126.84,248.31,129ZM194,265.73c-18.61-10.18-17.25-48.65,3-85.77a136.86,136.86,0,0,1,24.8-33c9-8.61,18.25-14.48,26.78-17,7.29-2.14,13.68-1.76,19,1.14s9.06,8.06,11.2,15.33c2.51,8.55,2.57,19.51.18,31.72a137.57,137.57,0,0,1-14.41,38.72h0a137.48,137.48,0,0,1-24.8,33c-9,8.6-18.26,14.48-26.79,17C205.63,269,199.25,268.63,194,265.73Zm71.38-48.41Z"/> 
 
     </g> 
 
    </svg> 
 

 
</html>