SVG <linearGradient> Element
Last Updated :
13 Oct, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...