Radial gradient

../../../_images/radial-gradient.png

  1. A radial gradient should be given an id attribute so that it can be used by other elements for filling. Make sure that the value contains only letters and numbers and is unique in your SVG.

  2. Each color step within a gradient is defined with a <stop> element that determines the color value and transparency.

  3. The offset attribute specifies where the color change is to take place. Use values between 0 and 1 for this. If you do not define any offsets, the color changes will automatically be evenly distributed over the entire gradient.

  4. The attribute stop-color defines the desired color value. Various notations are permitted: