SVG Gradients -Linear

---

SVG Gradients

A gradient is a smooth transition from one color to another. Additionally, you can apply transitions of multiple colors to the same element.

There are mainly two types of SVG gradients:

• Linear gradients - <linearGradient>
• Radial gradients - <radialGradient>

---

SVG Linear Gradients - <linearGradient>

In SVG, the<linearGradient>element is used to create linear gradients. It can transition from one color to another along a straight line, thereby creating a smooth gradient effect.

Linear gradients can be used to fill or stroke SVG graphic elements, giving them rich color variations.

Basic Syntax

<linearGradient id="gradient_id" x1="x1" y1="y1" x2="x2" y2="y2">
  <stop offset="offset1" stop-color="color1" />
  <stop offset="offset2" stop-color="color2" />
  <!-- 更多的 <stop> 元素 -->
</linearGradient>

Parameter description:

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

• x1andy1The attribute defines the coordinates of the start point of the gradient.

• x2andy2The attribute defines the coordinates of the end point of the gradient.

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

Linear gradients can be defined as horizontal, vertical, or angular gradients:

• When y1 and y2 are equal and x1 and x2 are different, a horizontal gradient can be created.
• When x1 and x2 are equal and y1 and y2 are different, a vertical gradient can be created.
• When x1 and x2 are different, and y1 and y2 are different, an angular gradient can be created.

The following code defines a horizontal linear gradient from red to blue, and then applies it to a filled rectangle, giving the rectangle a gradient fill effect.

Example 1

Defines an ellipse with a horizontal linear gradient from yellow to red:

Here is the SVG code:

Click to view:View SVG file。

Code explanation:

• The id attribute of the <linearGradient> tag defines a unique name for the gradient.
• The X1, X2, Y1, Y2 attributes of the <linearGradient> tag define the start and end positions of the gradient.
• The color range of a gradient can consist of two or more colors. Each color is specified by a <stop> tag. The offset attribute is used to define the start and end positions of the gradient.
• The fill attribute links the ellipse element to this gradient.

Example 2

Defines an ellipse with a vertical linear gradient from yellow to red:

Here is the SVG code:

Click to view:View SVG file。

Example 3

Defines an ellipse with a horizontal linear gradient from yellow to red, and adds text inside the ellipse:

Here is the SVG code:

Click to view:View SVG file。

Code explanation:

• The <text> element is used to add text.

Notes

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

• The start and end points of a gradient can be located anywhere, and the gradient interpolates along the straight line between the defined start and end points.

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

• Linear gradients can be applied to fill or stroke SVG graphic elements.

Other extensions