SVG <linearGradient> Element
SVG <linearGradient> Element allows the developer to define linear gradients to apply SVG elements. It allows a smooth transition from one color to another. This is the most reliable technique.
Linear gradients can be defined as vertical, angular gradients or horizontal:
- Vertical gradients are created when x1 and x2 are equal and y1 and y2 different.
- Angular gradients are created when x1 and x2 differ and y1 and y2 are different.
- Horizontal gradients are created when y1 and y2 are equal and x1 and x2 different.
Features:
- Using the default gradient left to right, although that can be changed easily; I’ll show you how in a moment.
- The stop element handles for gradients are similar to Adobe products and photoshop.
- The offset positions can be valued from 0 to 1 or as percentages from 0% to 100% It represented the color radiated by the structure.
- The colors to be used in the gradient can be defined from any of the CSS colors.
Syntax:
The id attribute of the <linearGradient> tag must be unique for the gradient.
The x1, x2, y1, and y2 attributes of the <linearGradient> tag will represent the start and end position of the gradient.
<linearGradient id="Geek1" x1="2%" y1="1%" x2="100%" y2="1%">
A gradient’s color range can be made up of two or more sorts of colors. A stop> tag is used to specify each color. The offset attribute is used to represent from where the gradient color will begin and end.
<stop offset="0%"
style="stop-color:rgb(0,255,0);stop-opacity:1"/>
The fill attribute links the ellipse element to the gradient.
<ellipse cx="190" cy="70"
rx="85" ry="55" fill="url(#Geek1)"/>
Example 1: Defining an ellipse linear gradient from Green To Blue.
Inside the <linearGradient> tags there are two color stops defined by <stop> elements. The first color stop sets a blue color at an offset of 0% and the second set a green color at an offset of 100%.
HTML
<!DOCTYPE html><html><svg height="150" width="400"> <defs> <linearGradient id="Geek1" x1="2%" y1="1%" x2="100%" y2="1%"> <stop offset="0%" style= "stop-color:rgb(34, 221, 81);stop-opacity:1" /> <stop offset="100%" style= "stop-color:rgb(11, 22, 172);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#Geek1)" /></svg></html> |
Output:
Green To Blue
Example 2: Defining a rectangle linear gradient from Red To Black.
The linear gradient inside the <defs> tags gives the gradient an id of linear. The id is then referenced by the rectangle fill property.
HTML
<!DOCTYPE html><html><body> <h1>GeeksForGeeks</h1> <svg width="600" height="600"> <defs> <linearGradient id="Geek1"> <stop offset="0%" stop-color="#FF0000"/> <stop offset="100%" stop-color="#00FFF00"/> </linearGradient> </defs> <g> <text x="30" y="50">GeeksForGeeks: </text> <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" fill="url(#Geek1)"/> </g> </svg></body></html> |
Output:
Supported Browsers: The following browsers are supported by this SVG element:
- Chrome
- Edge
- Firefox
- Internet Explorer
- Safari
- Opera
Please Login to comment...