SVG Gradients -Radial

In SVG, the<radialGradient><radialGradient> element is used to create radial gradients, which can spread outward from a center point to form a gradient effect, giving graphics rich color variations such as circular and radial shapes.

Radial gradients can be applied to the fill or stroke of SVG graphic elements, adding a sense of depth and visual effects to them.

Basic Syntax

<radialGradient id="gradient_id" cx="cx" cy="cy" r="r" fx="fx" fy="fy">
  <stop offset="offset1" stop-color="color1" />
  <stop offset="offset2" stop-color="color2" />
  <!-- 更多的 <stop> 元素 -->
</radialGradient>

Parameter Description:

• idThe attribute defines a unique identifier for the radial gradient, used to reference the gradient in SVG images.

• cxandcyThe attribute defines the coordinate of the center point of the gradient.

• rThe attribute defines the radius of the gradient.

• fxandfyThe attribute defines the coordinates of the gradient focus (optional), used to control the shape and direction of the gradient.

• <stop>The element is used to specify the colors and color positions in the gradient.

The following code defines a radial gradient from red to blue, then applies it to a filled circle, giving the circle a gradient fill effect.

Example 1

Define a radial gradient from white to blue for an ellipse:

Below is the SVG code:

Click to view:View SVG file。

Code Explanation:

• The id attribute of the <radialGradient> tag can define a unique name for the gradient.
• The CX, CY, and r attributes define the outermost circle, and Fx and Fy define the innermost circle.
• The gradient color range can consist of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define the start and end of the gradient colors.
• The fill attribute links the ellipse element to this gradient.

Example 2

Define another ellipse with a radial gradient from white to blue:

Below is the SVG code:

Click to view:View SVG file。

Notes

• A gradient can contain multiple<stop>elements, each<stop>element represents a color and a position in the gradient.

• cx、cyandrThe attribute determines the center and radius of the gradient, whilefxandfythe attribute is used to control the gradient focus, allowing adjustment of the shape and direction of the gradient.

• The coordinate values of the gradient can use percentages or specific length values; percentage values are relative to the size of the graphic element.

• Radial gradients can be applied to the fill or stroke of SVG graphic elements.

By using<radialGradient>the element, you can create rich and colorful radial gradient effects, adding a sense of depth and visual appeal to SVG graphic elements.