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>