animateTransformを使用して、オブジェクトを画面の正確な中心の周りに回転させるにはどうすればいいですか？

Question

はハードコーディングされた寸法で、画面の中央付近に円を移動するため、次のSVGコードを考えてみましょう：

<svg xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <ellipse id="circ" style="fill:#000000" 
      cx="60%" cy="50%" 
      rx="10" ry="10" /> 

     <!--Assuming window size is 1000x1000-->  
     <animateTransform attributeName="transform" 
      type="rotate" dur="10s" 
      from="0,500,500" 
      to="360,500,500" 
      repeatCount="indefinite"/> 
    </g> 
</svg> 

私はパーセントで回転の中心を提供しようとすると、アニメーションはでは動作しません。すべて：

<animateTransform attributeName="transform" 
    type="rotate" dur="10s" 
    from="0,50%,50%" 
    to="360,50%,50%" 
    repeatCount="indefinite"/> 

これを修正するにはどうすればよいですか？

Answer 1

あなたのSVGにviewBoxを設定して、サイズを変更しても、楕円はその中心を中心に回転します。

viewBox="0 0 1000 1000" 

ここでは、幅と高さが1000の値が選択されています。これは500を中心にするためです。

svg:nth-child(1) { 
 
    width: 200px; 
 
} 
 

 
svg:nth-child(2) { 
 
    width: 500px; 
 
} 
 

 
svg { 
 
    border: solid 1px green; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> 
 
    <g> 
 
     <ellipse id="circ" style="fill:#000000" 
 
      cx="60%" cy="50%" 
 
      rx="10" ry="10" /> 
 

 
     <!--Assuming window size is 1000x1000-->  
 
     <animateTransform attributeName="transform" 
 
      type="rotate" dur="10s" 
 
      from="0,500,500" 
 
      to="360,500,500" 
 
      repeatCount="indefinite"/> 
 
    </g> 
 
</svg> 
 

 
<!-- An exact duplicate of th first one --> 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> 
 
    <g> 
 
     <ellipse id="circ" style="fill:#000000" 
 
      cx="60%" cy="50%" 
 
      rx="10" ry="10" /> 
 

 
     <!--Assuming window size is 1000x1000-->  
 
     <animateTransform attributeName="transform" 
 
      type="rotate" dur="10s" 
 
      from="0,500,500" 
 
      to="360,500,500" 
 
      repeatCount="indefinite"/> 
 
    </g> 
 
</svg>