SVG Gradient - Radioactive
SVG Radial Gradient - The <radialGradient>
<radialGradient> element is used to define a radial gradient.
<radialGradient> tag must be nested inside <defs>. The <defs> tag is the abbreviation of definitions, which can define special elements such as gradients.
Example 1
Define a radial gradient from white to blue ellipse:
The following is the SVG code:
Example
<!DOCTYPE html> <html> <body> <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> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
For Opera users: View SVG file ( Right click on the SVG graphic preview source).
Code analysis:
- ##<radialGradient>The id attribute of the tag can define a unique name for the gradient
- The outermost circle defined by the CX, CY and r attributes and the innermost circle defined by Fx and Fy
- The gradient color range can be composed of two or more color composition. Each color is specified with a <stop> tag. The offset attribute is used to define the start and end of the gradient
- The fill attribute links the ellipse element to this gradient
Example 2Another ellipse defining a radioactive gradient from white to blue: Here is the SVG code:
Example
Run Instance»Click the "Run Instance" button to view the online instance
For Opera users: View the SVG file (right-click on the SVG graphic preview source). <!DOCTYPE html> <html> <body> <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> </body> </html>
Run Instance»Click the "Run Instance" button to view the online instance
