圍繞長軸旋轉SVG省略號路徑

Question

所以我用SVG編寫了this徽標。

我試圖旋轉分組橢圓周圍的長軸，以創建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%; 
} 

旋轉身邊中心似乎是easy，但我似乎無法弄清楚如何將其旋轉（至少歪斜或/縮小他們向軸線，直到他們成爲一條線，然後回） 。

難以做到嗎？請記住，我是一名完整的SVG新手。

謝謝！

Answer 1

這樣看來我可以只使用ROTATE3D做正是我打算。

.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/ 這裏是解決方案的一部分。

Answer 2

您無法對SVG內的元素進行3D變換。所以你不能，例如，圍繞垂直（Y）軸旋轉。

您需要通過僅在一個方向上縮放橢圓標籤來模擬旋轉。然後再次備份。我不建議使用transform-origin: 50% 50%。百分比值在瀏覽器之間的工作方式不同。 Chrome會按照你想要的方式行事，但這種方式實際上與規範相反。使用旋轉中心的絕對座標。對於你的形狀，相當於（50％，50％）似乎是大約（230.7，198.4）。

所以我們需要做的，規模上橢圓的旋轉軸，就是： 1.旋轉橢圓垂直 2.規模向上或向下按需要 3.旋轉橢圓回到其原始旋轉

對於我在下面選擇的橢圓示例，我們需要使用的角度是28度。所以我們的變換是：

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

請注意，不允許按0縮放。所以你需要使用一個非常小的值，而不是零。

注

你的形狀都對他們（translate(-152.27, -120.27)）現有的相同的變換。爲了減少事情的複雜性，我將所有的橢圓放在一個父組中，並將公共轉換移至該組。

最後，請注意，還有一個其他併發症。當你像這樣縮放時，你不僅縮放橢圓的寬度，還縮放橢圓線的寬度。當你開始製作動畫時，這可能會破壞正確的3D旋轉幻覺。

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