HTML and CSS Reference
In-Depth Information
The
offset
attribute dictates where in the drawing the gra-
dient starts. The example above draws a smooth gradient color
change over the space of the image. The
styl
e attribute allows
you to list any CSS-specific color. You can add the two colors to
the LINEARGRADIENT in the following 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>
<linearGradient id=”yellow_red” x1=”0%” y1=”100%”
x2=”0%” y2=”0%”>
<stop offset=”0%” style=”stop-color:yellow;stop-
opacity:1”/>
<stop offset=”100%” style=”stop-color:red;stop-
opacity:1”/>
</linearGradient>
</defs>
<rect width=”400” height=”400”
style=”fill:url(#yellow_red);
stroke:yellow”/>
</svg>
You can see that the rectangle image uses a URL string to find
the style called
#yellow_red.
The yellow_red color style is the
name of the gradient. See Figure 3.20.
Radial gradients are similar to linear gradients. The differ-
ence is that you define essentially two circles—an outer and
inner circle—with the radial gradient. As with linear gradients,
the RADIALGRADIENT element requires a valid ID name to
identify the gradient. Following that, you have five attributes
to define the inner and outer circle and radius. Following is an
example where the
CX
and
CY
attributes are the outer circle,
the
R
is the radius, and the
FX
and
FY
attributes are the inner
circle.
<radialGradient id=”yellow_red” cx=”50%” cy=”50%”
r=”50%”
fx=”50%” fy=”50%”>
The colors for the gradient are defined using a STOP list. The
following code shows the radial gradient applied to a rectangle.
Figure 3.20
Linear gradients
can be drawn horizontally.
