Chapter 6. Paths
All of the basic shapes described in
Chapter 3 are really shorthand forms
for the more general
element. You are well advised to use these shortcuts; they help make your
SVG more readable and more structured. The
<path> element is more general; it draws
the outline of any arbitrary shape by specifying a series of connected
lines, arcs, and curves. This outline can be filled and drawn with a
stroke, just as the basic shapes are. Additionally, these paths (as well
as the shorthand basic shapes) may be used to define the outline of a
clipping area or a transparency mask, as you will see in Chapter 9.
All of the data describing an outline is in the
d attribute (the
d stands for data). The
path data consists of one-letter commands, such as
M for moveto or
L for lineto, followed by
the coordinate information for that particular command.
moveto, lineto, and closepath
Every path must begin with a moveto
command. The command letter is a capital
followed by an x- and
y-coordinate, separated by commas or whitespace.
This command sets the current location of the “pen” that’s drawing the
This is followed by one or more
lineto commands, denoted by a capital
L, also followed by x-
and y-coordinates, and separated by commas or
whitespace. Example 6-1 has
three paths. The first draws a single line, the second draws a right
angle, and the third draws two thirty-degree angles. When you “pick up”
the pen with another moveto, you are starting a ...