SVG Linear Gradient
SVG linear gradient is used to represent the linear transition of one color to another.
The <linearGradient> element defines the linear gradient. We can use the <linearGradient> element within <defs> element.
Linear gradients can be vertical, horizontal or angular gradients:
- Horizontal gradients are created when x1 and x2 differs and y1 and y2 equals.
- Vertical gradients are created when y1 and y2 differs and x1 and x2 equals.
- Angular gradients are created when both y1, y2 and x1, x2 differs.
Test it Now
- The id attribute defines a unique name for the gradient.
- The x1, x2, y1, y2 attributes define the start and end position of the gradient.
- A gradients color range may be composed of two or more colors and each color contains a tag. The offset attribute define that where the gradient color start and end.
- The fill attribute is used to link the element of eclipse to the gradient.