1.18.1. SVG radioactive gradient-
<radialGradient>
¶
<radialGradient>
elements are used to define radioactive gradients.
<radialGradient>
labels must be nested in the
<defs>
on the inside.
<defs>
tag is an acronym for definitions that defines special elementssuch as gradients.
1.18.2. Example 1 ¶
Define a radioactive gradient from white to blue ellipse:
Here is the SVG code: Code parsing: Outermost circle defined by CX,CY and r attributes and innermost circle defined by Fx and Fy The gradient color range can consist of two or more colors. Use one for eachcolor Populate the attribute to Example ¶
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%"
fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"
/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<radialGradient>
id attribute of the tag defines a unique name for the gradient
<stop>
label assignment.
offset
property is used to define the start and end of a gradient
ellipse
elements are linked to this gradient
1.18.3. Example 2 ¶
Another ellipse that defines the radioactive gradient from white to blue:
Here is the SVG code:Example ¶
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%"
fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"
/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>