スケーリング可能なSVGオブジェクトをアニメーション化して中心を中心に回転させます

Question

SVGを中心に回転させてSVGをアニメーション化したいのですが、SVGのサイズが異なるため、Webページのどこで使用されるのかによって中心点が変わります。これはあなたのデスクトップ上に

<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"> 
 
    <title>spinning orange circle</title> 
 
    <style> 
 
     .path { 
 
     stroke-dasharray: 187; 
 
     stroke-dashoffset: 0; 
 
     stroke: #ed770b; 
 
     transform-origin: 50% 50%; 
 
     animation: dash 1.4s ease-in-out infinite; 
 
     } 
 

 
     @keyframes dash { 
 
     0% { stroke-dashoffset: 187; } 
 
     50% { 
 
     stroke-dashoffset: 46.75; 
 
     transform:rotate(135deg); 
 
     } 
 
     100% { 
 
     stroke-dashoffset: 187; 
 
     transform:rotate(450deg); 
 
     } 
 
     } 
 

 
    </style> 
 
    <animateTransform attributeName="transform" 
 
         type="rotate" 
 
         from="0" 
 
         to="360" 
 
         begin="0s" 
 
         dur="1.4s" 
 
         repeatCount="indefinite" 
 
    /> 
 
    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle> 
 
</svg>

コピーやSVGとして保存して、問題を確認するには、ブラウザでそれを実行します。

は、ここに私のSVGです。

これは私のページ上にあるとき、またはそれだけでページ上にあるとき、スピナーは見えなくなります。どのようにしてそのセンターについてスピンアップすることができますか？ CSSを後で使用して50x50ピクセル以上に拡大するとしたら、どうやってセンターを中心に回転させることができますか？

編集：あなたが変更した場合、アニメーションは、これらの値を持つように変換：

<animateTransform attributeName="transform" 
        type="rotate" 
        from="0 14 14" 
        to="360 14 14" 
        begin="0s" 
        dur="1.4s" 
        repeatCount="indefinite" 
/> 

それは動作しますが、あなたは28pxの*の28pxよりも大きな画像を拡大縮小たら、それはもはや仕事がします。

Answer 1

私はそれが全体の問題を解決するわからないんだけど、SVGなどのコードを保存し、開いたときにこの作品：

<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"> 
 
    <title>spinning orange circle</title> 
 
    <style> 
 
     g { 
 
      transform-origin: 50% 50% 0px; 
 
     } 
 
     .path { 
 
      stroke-dasharray: 187; 
 
      stroke-dashoffset: 0; 
 
      stroke: #ed770b; 
 
      transform-origin: 50% 50%; 
 
      animation: dash 1.4s ease-in-out infinite; 
 
     } 
 

 
     @keyframes dash { 
 
      0% { stroke-dashoffset: 187; } 
 
      50% { 
 
       stroke-dashoffset: 46.75; 
 
       transform:rotate(135deg); 
 
      } 
 
      100% { 
 
       stroke-dashoffset: 187; 
 
       transform:rotate(450deg); 
 
      } 
 
     } 
 

 
    </style> 
 
    <g> 
 
     <animateTransform attributeName="transform" 
 
          type="rotate" 
 
          from="0" 
 
          to="360" 
 
          begin="0s" 
 
          dur="1.4s" 
 
          repeatCount="indefinite" 
 
     /> 
 
     <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle> 
 
    </g> 
 
</svg>

私はAとコンテンツ全体を包ん新しい<g>タグと私はそれをtransform-origin: 50% 50% 0px;にCSSで与えました。