Radial in
SVG falls under a kind of gradient, a gradient can be described as smooth
transistion which occurs from one color to another color.<radialGradient>
element is responsible for defining and
describing the radial gradient. This <radialGradient> element should be always
nested with some tags like <defs>. This Radials are used for defining an ellipse with the help of
gradient from one color to another one.<radialGradient> element is used
for the purpose of defining and describing radial gradient.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nirajan Ghimirey’s Workshop</title>
</head>
<body>
<h2> radial example</h2>
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="45%" cy="45%" r="45%" fx="45%" fy="45%">
<stop offset="0%" style="stop-color:rgb(43, 199, 255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(58, 175, 255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html> 
No comments:
Post a Comment