如何使物體繞使用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

設置一個viewBox你的SVG，那麼無論大小，你做吧，橢圓將繞它的中心。

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>