장축을 중심으로 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) 축을 중심으로 회전 할 수는 없습니다.

타원형 dosn을 한 방향으로 만 스케일링하여 회전을 시뮬레이트해야합니다. 그런 다음 다시 백업하십시오.

또한 transform-origin: 50% 50%을 사용하지 않는 것이 좋습니다. 백분율 값은 브라우저간에 다르게 작동합니다. Chrome은 원하는대로 동작하지만 실제로는 사양에 위배됩니다. 회전 중심에 절대 좌표를 사용하십시오. 당신의 모양에있어서, (50 %, 50 %)의 등가물은 약 (230.7, 198.4) 인 것처럼 보입니다. 에

그래서 우리는, 타원의 회전 축으로 확장하기 위해 수행해야 할 것입니다 : 3. 다시 타원을 회전 할 필요 1. 아래로 수직 2. 스케일 업에 타원을 회전하거나 원래 회전

아래에서 선택한 타원에 대해 우리가 사용해야하는 각도는 28도입니다. 따라서 변환은 다음과 같습니다.

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

0으로 스케일을 조정할 수 없습니다. 따라서 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>