HTML and CSS Reference
Table 14-2: Stroke and Fill Properties
A color or reference to a gradient or pattern used to draw the outline.
The size of the outline.
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.
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.
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
Figure 14-2: SVG gradients.