SVGの長軸回りの省略記号のパス

Question

だから私はthisのロゴをSVGで書いています。

私は、3次元回転の錯覚を作成するために、長軸の周りにグループ化された楕円を回転しようとしています。中心の周りにそれらを回転

.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%もお勧めします。 Percentageの値はブラウザによって異なる。 Chromeはあなたが望むように動作しますが、実際には仕様に反しています。回転中心に絶対座標を使用します。あなたの形は、（50％、50％）相当のものが約（230.7、198.4）あるようです。

だから我々は、楕円の回転軸にスケールする何をする必要があるか、にされています。必要に応じて 1. 3.戻すに楕円を回転させ、縦 2.スケールアップまたはダウンに楕円を回転させます元の回転

私が以下で選んだ楕円の例では、使用するのに必要な角度は28度でした。したがって、変換は次のとおりです。

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

0によるスケーリングは許可されません。したがって、ゼロの代わりにスケールには非常に小さな値を使用する必要があります。

ノート

あなたの形状はすべて、既存の同一は彼ら（translate(-152.27, -120.27)）に変換しています。物事をより複雑にするために、私はすべての楕円を親グループに入れ、共通変換をそのグループに移動しました。

最後に、もう1つの問題があることに注意してください。このようにスケールすると、楕円の幅をスケーリングするだけでなく、楕円の線の幅をスケーリングすることもできます。それは、アニメーションを開始するときに、適切な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>