如何使物体绕使用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>