1.17.1. 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
1.17.2. 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.
1.17.3. Example 1 ¶
Define the oval shape of the horizontal linear gradient from yellow to red:
Here is the SVG code: Code parsing: The color range of a gradient can be made up of two or more colors. Each color passes through a Populate the attribute to 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>
<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.
<stop>
Label to specify.
offset
property isused to define the start and end positions of the gradient.
ellipse
elements are linked to this gradient
1.17.4. 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>
1.17.5. Example 3 ¶
Define an oval, horizontal linear gradient from yellow to red and add text within the ellipse:
Here is the SVG code: Code parsing: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>
<text>
element is used to add a text