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”
<svg width=”100%” height=”100%” version=”1.1”
<linearGradient id=”yellow_red” x1=”0%” y1=”100%”
x2=”0%” y2=”0%”>
<stop offset=”0%” style=”stop-color:yellow;stop-
<stop offset=”100%” style=”stop-color:red;stop-
<rect width=”400” height=”400”
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
<radialGradient id=”yellow_red” cx=”50%” cy=”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.
Search WWH ::

Custom Search