How to fix a not scaling circle in svg:no errors appearing - css

Question

Im trying to have a circle expand from a 1px radius to a 20px radius using a scale animation in SVG. The current radius is 1px and I am trying to scale it to 20x that. The problem is that whenever I attempt to run the code the 1px dot travels diagnoly up and left and then suddenly to out-side of the SVG
Ive tried using atributeType="xml" with atributeName="r" as well as using atributeName="transform" type="scale"
this is the link for the entire code:https://pastebin.com/ARR2kUfM
<animatetransform
attributeType="xml"
attributeName="transform"
type="scale"
from="1"
to="20"
begin="0s"
dur="2s"
repeatCount="indefinite"
fill="freeze"
/>
</circle>
I would like for the dot to scale outwards from the center to 20px without shifting, but the current result is the circle flying off the screen.

Answer 1

The coordinates of any svg figure are counted from the upper left corner of the svg canvas.
When using the scale command, the coordinates of the figure are recalculated.
Increasing the value scale(20) the coordinates of the center of the circle become 20 times larger so the circle moves diagonally and extends beyond the edge of the SVG canvas.
To avoid this effect, instead of the scale command, you can use the command to increase the radius of the circle
<style>
svg{
border: 5px red solid;
height:600px;
width:600px;
}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600" >
<rect x="295" y="430" width="10" height="100" style="stroke:none; fill: hsl(90, 100%, 47%);"/>
<circle cx="300" cy="430" r="1" stroke="black" stroke-width="2" fill="yellow">
<animate
attributeName="r"
from="1"
to="20"
begin="0s"
dur="2s"
repeatCount="indefinite"
fill="freeze"
/>
</circle>
<rect x="0" y="500" width="600" height="100" style="stroke:none; fill:hsl(120, 100%, 30%);"/>
</svg>