HTML and CSS Reference
In-Depth Information
xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”300” cy=”150” rx=”250” ry=”120”
style=”fill:blue;
stroke:#999;stroke-width:1cm”/>
</svg>
Figure 3.18 shows how CSS colors and measurements can be
used.
To add a linear of radial gradient to an SVG drawing you need
to use specific SVG gradient elements.
Figure 3.18
Standard CSS colors
and measurements can be used
to control the presentation of a
drawing.
Applying Gradients to SVG Images
SVG employs a great technique that allows you to reuse a gradi-
ent definition over one or more images in your SVG illustration. This
is done using either the LINEARGRADIENT or RADIALGRADIENT
element types. Both gradients allow you to define the horizontal
and vertical colors and direction of the gradient.
Let's look first at linear gradients. The LINEARGRADIENT ele-
ment is constructed by five different attributes that define over a
linear direction how the gradient will behave. The first attribute
you need to provide information for is the
ID
attribute, which
allows you to give your gradient a name you can use to reference
from your drawing.
For a linear gradient you can draw your gradient moving over
an X-Y axis direction. To determine the direction of the gradient
you have to specify the start and end X and start and end Y axes
points. The following illustrates a left-right gradient:
<linearGradient x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
To create a vertical gradient you change the Y and X axes to:
<linearGradient x1=”0%” y1=”100%” x2=”0%” y2=”0%”>
You can see the difference between the two numbers is changing
the X or Y axis to 100%. See Figure 3.19.
Changing the X and Y axes percentages will change how the
gradient is drawn. Adding color to the gradient is the next step.
To do this, you create a list of two or more colors using the STOP
element. For instance, to create a simple yellow-to-red gradient
color change you will add two STOP elements as shown in the
following.
<stop offset=”0%” style=”stop-color:yellow;stop-
opacity:1”/>
<stop offset=”100%” style=”stop-color:red;stop-
opacity:1”/>
Figure 3.19
Linear gradients can
be applied in SVG images using
the LINEARGRADIENT element.
