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