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

Question

This question already has an answer here:
CSS transform origin issue on svg sub-element
(1 answer)
Closed 3 years ago.
Why is the blue circle not rotating in the center of its own axis?
Below you can find my previous code.
Here you can see my CSS with the proportionate SVG:
circle {
animation: grow 2s infinite;
transform-origin: center;
}
#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>

Answer 1

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>

Answer 2

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!