Accepted answer

In your JSFiddle you are using the wrong attributes. RadialGradient does not have x1, x2, etc. It has cx, cy and so on.

On your <radialGradient> tag, add an attribute called gradientUnits and set its value to "userSpaceOnUse".

This means that the gradient attribute percentages (cx, cy, etc.) will be considered for the entire SVG instead of just for a particular shape. Then adjust the values as needed.

Here is the working solution:

Related Query

More Query from same tag