Why is blue circle not spinning in the center of itself [duplicate]

Answer 1

Because scale in SVG is different, it makes scale in X & Y axis. Additionally it scales "cx" and "cy" properties. The best way is to make "cx" & "cy" at 0 and use the "translate" to coordinates you need

 <svg xmlns="http://www.w3.org/2000/svg" width="80" height="110" version="1.1">
      <rect
        width="70"
        height="100"
        x="5"
        y="5"
        fill="white"
        stroke="red"
        stroke-width="10"
        rx="5" />
    	<circle cx="0" cy="0" r="3" fill="blue" transform="translate(40 105)">
    		<animateTransform 
                     attributeName="transform"
    				 type="scale" 
    				 additive="sum" 
    				 from="1 1" 
    				 to="1 1" 
    				 values="1 1; 0.5 0.5; 1 1" 
    				 begin="0s" 
    				 dur="2s" 
    				 repeatCount="indefinite">
    			
    		</animateTransform>
    	</circle>	
    </svg>

Enjoy!

Answer 2

You need transform-box: fill-box;

circle {
  animation: grow 2s infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="80"
  height="110"
  version="1.1"
>
  <rect
    width="70"
    height="100"
    x="5"
    y="5"
    fill="white"
    stroke="red"
    stroke-width="10"
    rx="5"
  />
  <circle cx="40" cy="105" r="3" fill="blue" />
</svg>