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
Learn how your website performs under various load conditions
 |
|
WAPT
is a load, stress and performance testing tool for websites and web-based applications.
In contrast to "800-pound gorilla" load testing tools, it is designed to minimize the learning
curve and give you an ability to create a heavy load from a regular workstation.
WAPT is able to generate up to 3000 simultaneously acting virtual users using standard hardware configuration.
Virtual users in each profile are fully customizable. Basic and NTLM authentication methods are supported.
Graphs and reports are shown in real-time at different levels of detail, thus helping to manage the testing process.
Download the free 30-day trial!
|
|
HOME
Printer friendly page
