HTML and CSS Reference
In-Depth Information
Table 14-2:
Stroke and Fill Properties
Property
Description
A color or reference to a gradient or pattern used to draw the outline.
stroke
The size of the outline.
stroke-width
stroke-linejoin
Set to one of
miter
,
round
,
bevel
or
inherit
, which defines how different line segments
are connected.
miter
is the default, which defines a sharp angle.
stroke-opacity
A number between 0 and 1 defining the opacity of the outline.
fill
A color or reference to a gradient or pattern used to draw the fill.
A number between 0 and 1 defining the opacity of the fill.
fill-opacity
NOTE
There are additional properties for creating dashed lines, fine-tuning the line joins, and controlling
the fill algorithm that you probably won't use often, but you can check out the spec for all the available op-
tions at
www.w3.org/TR/SVG/painting.html
.
The
stroke
and
fill
properties can be defined using simple CSS colors, but they can also use gradients.
SVG supports two types of gradients: linear and radial. Linear gradients define
x1,y1
and
x2,y2
properties
that represent the start and end of the gradient. Radial gradients define
cx,cy
and
fx,fy
properties along
with an
r
radius that represents the center of the outer circle and the focal point of the gradient. Both types of
gradients then use color
<stop>
tags to represent the color at specific percentages from the start to finish.
Gradients are created inside of a
<defs>
section and identified with
id
attributes. They are then referenced
using the
id
preceded by a pound sign inside of the URL value.
All this makes more sense with an example.
Listing 14-2
defines two gradients, a linear and a radial one, and
uses them on two equal size squares. The result is shown in
Figure 14-2
.
Figure 14-2:
SVG gradients.
