SVG Gradients - Radial
An SVG Gradient must be defined within a <defs> tag.
Radial Gradients
The <radialGradient> tag is used to define an SVG radial gradient.
The <radialGradient> tag must be nested within a <defs> tag. The <defs> tag is short
for definitions and it allows definition of special
elements such as gradients.
Copy the following code into Notepad and save
the file as "radial1.svg". Place the file in your Web directory:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
|
Code explanation:
- The id attribute of the <radialGradient> tag defines a unique name for the gradient
- The fill:url(#grey_blue) property links the ellipse element to the gradient
- The cx, cy and r attributes define the outermost
circle and the fx and fy define the innermost circle
- The color range for a gradient can be composed of two or more colors. Each color
is specified with a <stop>
tag. The offset attribute is used to define where the gradient color begin and
end
View example
Another example:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
|
View example
The Altova MissionKit is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet designer;
DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
|
