SVG - scale circle from center

Question

I want to scale my arc that is embedded in svg. While apply scale transform, it is scaled towards 0, 0. Instead of that, i want it to be scaled center from it's own.

here is the code

<g>                 
    <path d="M 300 100 a 200 200 0 1 0 0.00001 0" fill="#7EEC4A" stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9" stroke-opacity="0.2">
    </path>

    <animateTransform attributeType="xml"
        attributeName="transform"
        type="scale"
        from="0"
        to="1"
        dur="0.5s" fill="freeze" />
</g>

Answer 1

Using the <circle> element and animating the "r" attribute:

<g>                 
    <circle cx="200" cy="200" r="200" fill="#7EEC4A" stroke="rgb(208,231,235)" linejoin="round" stroke-width="1" fill-opacity="0.9" stroke-opacity="0.2">
        <animate attributeType="xml" attributeName="r" from="0" to="200" dur="5s" repeatCount="indefinite" />    
    </circle>
</g>