SVG Gradient - Linear
SVG Gradient
A gradient is a smooth transition from one color to another. In addition, multiple color transitions can be applied to the same element.
There are two main types of SVG gradients:
Linear
Radial
SVG Linear Gradient - The <linearGradient>
<linearGradient> element is used to define a linear gradient.
<linearGradient> tags must be nested inside <defs>. The <defs> tag is the abbreviation of definitions, which can define special elements such as gradients.
Linear gradients can be defined as horizontal, vertical or angular gradients:
Horizontal gradients can be created when y1 and y2 are equal, but x1 and x2 are different
When x1 and x2 are equal, but y1 and y2 are different, you can create a vertical gradient
When x1 and x2 are different, and y1 and y2 are different , can create an angular gradient
Example 1
Define a horizontal linear gradient from yellow to red in an oval shape:
The following is the SVG code ：
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
For Opera users: View SVG files (right-click on the SVG graphic preview source).
Code analysis:
- ##<linearGradient>The id attribute of the tag can define a unique name for the gradient
- <linearGradient>The X1, Each color is specified by a <stop> tag. The offset property is used to define the start and end positions of the gradient.
- The fill attribute links the ellipse element to this gradient
Example 2
Define a vertical linear gradient from Yellow to red oval:
Here is the SVG code:
Example
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
Run Example»
For Opera users: View the SVG file (right-click on the SVG graphic preview source). Example 3
Define an ellipse, a horizontal linear gradient from yellow to red and add text inside the ellipse:
The following is the SVG code:
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text> </svg> </body> </html>
Run instance»
For Opera users: View SVG files (right-click on the SVG graphic preview source).
Code analysis:
<text> element is used to add a text
