SVG Rescale circle from center

Question

I want to rescale my circle after the scaled from 1 1 to 2 2.. because after scaled it come 1 1 position suddenly. but I want to rescale it according to time period given by me like scale circle.. please kindly admire your answers to solve this matter. below appear my scale type code..

<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

You need to make the animateTransform apply to the circle by making it a child of the circle and not a sibling. Second if you want to animate round the circle's origin then draw the circle at the local origin and have a parent element translate it to where you want e.g.

<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>