A gradient
can be well said as a smooth transition which occurs between one color to another
one and vice-verse. There are several color transitions which are applicable to one element. On
SVG there are two types of SVG gradients and they are Linear and Radial.The LineraGradient element is used for the purpose of describing and
defining linear gradient.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>SVG Example</title>
</head>
<body>
<h2>An Example of Linear Gradient</h2>
<svg height="200" width="300">
<defs>
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:green;stop-opacity:0.5" />
<stop offset="50%" style="stop-color:blue;stop-opacity:1" />
<stop offset="70%" style="stop-color:yellow;stop-opacity:1" />
<stop offset="80%" style="stop-color:red;stop-opacity:1" />
<stop offset="5%" style="stop-color:brown;stop-opacity:0.5" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#linearGradient)" />
<text fill="yellow" font-size="19" font-family="Verdana" x="130" y="90">
Linear Gradient</text>
</svg>
<h2>An Example of Radial Gradient</h2>
<svg height="200" width="300">
<defs>
<radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="10%" style="stop-color:yellow;stop-opacity:0.5" />
<stop offset="50%" style="stop-color:#E6E12F;stop-opacity:1" />
<stop offset="70%" style="stop-color:green;stop-opacity:1" />
<stop offset="80%" style="stop-color:red;stop-opacity:1" />
<stop offset="10%" style="stop-color:orange;stop-opacity:0.5 stroke-width:2" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#radialGradient)" />
<text fill="black" font-size="14" font-family="Verdana" x="150" y="70">
Radial Gradient</text>
</svg>
</body>
</html>
No comments:
Post a Comment