SVG Linear Gradient in HTML
SVG Linear Gradients in HTML
All SVG filters are defined by < defs > element. It is used for the definition of the filter which is to be used.
The < filter > element is used to define an SVG filter. The element has a required id attribute that identifies the filter.
A gradient is a smooth transition from one color to another. Moreover, we can apply several color transitions to the same element.
The < linearGradient > element is used to define a linear gradient. Like filters, it must also be nested in < defs > tag.
Code explanation of code below is as:-
- 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 starting and ending positions of the gradient.
- Each color is specified with a < stop > tag. The offset attribute is used to define where the gradient color begins and ends.
- The fill attribute links the ellipse element to the gradient
Observations are:-
- Horizontal gradients are created when y1 and y2 are equal and x1 and x2 have different values.
- Vertical gradients are created when x1 and x2 are equal and y1 and y2 have different values.
- Angular gradients are created when x1 and x2 differ and y1 and y2 have different values.