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.
- 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.
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%.
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.
Supported Browsers: The following browsers are supported by this SVG element:
- Internet Explorer
Please Login to comment...