SVG 센터에서 크기 조정 서클

Question

크기를 조정 한 후 내 원을 크기를 조정하려면 1 1 2 2 ... 조정 한 후에 갑자기 1 1 위치가됩니다. 그러나 나는 규모 원형과 같은 시간주기에 따라 그것을 재조정하고 싶습니다.이 문제를 해결하기 위해 당신의 대답에 친절하게 찬탄을주십시오. 아래 당신은 animateTransform는 원의 아이가 아닌 형제를 만들어 원에 적용 할 필요가 내 규모 유형 코드 ..

<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 150px; height: 150px;margin-left: 600px;top: 100px;"> 
       <circle class ="cir" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/> 
        <animateTransform attributeName="transform" 
         type="scale" 
         from="1 1" to="2 2" 
         begin="0s" dur="4s"       
         repeatCount="indefinite" 
        />  
      </svg> 

Answer 1

나타납니다. 두 번째로 원의 원점을 애니메이션하여 원점에 원을 그려 부모 요소에 원한다면 예를 들어 원하는 위치로 번역합니다.

<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 150px; height: 150px;margin-left: 600px;top: 100px;"> 
    <g transform="translate(34,34)"> 
      <circle class ="cir" r="30" style="fill: red; stroke: blue; stroke-width: 2"> 
       <animateTransform attributeName="transform" 
        type="scale" 
        from="1 1" to="2 2" 
        begin="0s" dur="4s"       
        repeatCount="indefinite" 
       />  
      </circle> 
    </g> 
</svg>