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- <linearGradient>
<linearGradient> element is used to define a linear gradient.
<linearGradient> labels must be nested in the <defs> on the inside. <defs> the label is definitions , that defines special elements such as gradients
A linear gradient can be defined as a horizontal, vertical, or angular gradient:
When y1 and y2 are equal, but x1 and x2 are different, a horizontal gradientcan be created.
When x1 and x2 are equal, but y1 and y2 are different, a vertical gradient can be created.
When x1 and x2 are different, and y1 and y2 are different, an angular gradient can be created.
Example 1
Define the oval shape of the horizontal linear gradient from yellow to red:
Here is the SVG code:
Example
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/></svg>
Code parsing:
<linearGradient>id attribute of the tag defines a unique name for the gradient<linearGradient>the X1 ~ X2 ~ X2 ~ Y1 ~ Y2 attribute of the tag definesthe start and end of the gradient.The color range of a gradient can be made up of two or more colors. Each color passes through a
<stop>Label to specify.offsetproperty isused to define the start and end positions of the gradient.Populate the attribute to
ellipseelements are linked to this gradient
Example 2
Define an oval with a vertical linear gradient from yellow to red:
Here is the SVG code:
Example
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="0%"y2="100%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/></svg>
Example 3
Define an oval, horizontal linear gradient from yellow to red and add text within the ellipse:
Here is the SVG code:
Example
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/><textfill="#ffffff"font-size="45"font-family="Verdana"x="150"y="86">SVG</text></svg>
Code parsing:
<text>element is used to add a text