HTML and CSS Reference
In-Depth Information
<?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=”yellow_red” cx=”50%” cy=”50%”
r=”50%”
fx=”50%” fy=”50%”>
<stop offset=”0%” style=”stop-color:yellow;stop-
opacity:1”/>
<stop offset=”100%” style=”stop-color:red;stop-
opacity:1”/>
</radialGradient>
</defs>
<rect width=”400” height=”400”
style=”fill:url(#yellow_red);
stroke:yellow”/>
</svg>
Figure 3.21 shows the results.
Both the linear and radial gradients can have more than two
colors. The following code (see Figure 3.22) has four colors.
<stop offset=”0%” style=”stop-color:yellow;stop-
opacity:1”/>
<stop offset=”25%” style=”stop-color:red;stop-
opacity:1”/>
<stop offset=”50%” style=”stop-color:blue;stop-
opacity:1”/>
<stop offset=”100%” style=”stop-color:black;stop-
opacity:1”/>
In addition, you can link multiple images to a single gradient.
The following SVG code links a circle and rectangle to the same
gradient.
<?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”>
Figure 3.21 A radial gradient
applied to a rectangle shape.
Figure 3.22 Multiple colors can
be created to change the gradient.
Search WWH ::




Custom Search