当svg容器的高度/宽度与高度/宽度不同时，为什么d3中的径向渐变会发生变化？

I am trying to understand how the radial gradient in d3.js works. I have a circle and I filled it with the radial gradient specified in 'defs' tag. I set the 'r' coordinate of the radial gradient to be 60% and 'cx' and 'cy' to be zero. My understanding is the radial gradient will always start from 0,0 coordinate (exactly in the middle of my circle element) and the outer circle of the radial gradient will "stop" at 60% of my "r". Now when I change only the width of my svg container and leave the height unchanged the radial gradient is not the same. It seems like the outer circle of the radial gradient is pushed away. I cannot understand why is this happening. I spent hours searching online but I could not find sufficient answer. Is it possible to maintain the shape of the radial gradient when the height or width is changed? I am trying to understand how the radial gradie