Lesson 2: Using scalable vector graphics CHAPTER 12 497
The following is a list of commands that can be used in a path.
■■M or m ove to a specified coordinate.M
■■L or l raw a line from the current location to the coordinate specified.D
■■H or h Draw a horizontal line from the current location to the new x value specified
on the same horizontal plane.
■■V or v Draw a vertical line from the current location to the new y value specified on
the same vertical plane.
■■A or a Parameters are rx, ry, x-axis-rotation, large-arc, sweep, x, and y. This com-
mand draws an elliptical arc from the current point to the specified coordinate of x, y
with x-radius rx and y-radius ry. The ellipse is rotated x-axis-rotation degrees. If the arc
is less than 180 degrees, large-arc is zero; else it is one. If the arc is greater than 180
degrees, the large-arc is set to 1. If the arc is drawn in the positive direction, the sweep
is set to 1; else the sweep is set to zero.
■■Q or q Parameters are x1, y1, x, and y. This command draws a quadratic Bézier curve
from the current location to the coordinate specified as x, y by using the control point
specified as x1, y1.
■■T or t Draw a quadratic Bézier curve from the current point to the coordinate speci-
fied, using the previous Q command’s control point.
■■C or c Parameters are x1, y1, x2, y2, x, and y. This command draws a cubic Bézier
curve from the current point to the x, y coordinate specified by using control point x1,
y1 for the beginning of the curve and control point x2, y2 for the end of the curve.
■■S or s Parameters are x2, y2, x, and y. This command draws a cubic Bézier curve from
the current point to the x, y coordinate specified by using the control point from the
previous C command for the beginning of the curve and control point x2, y2 for the
end of the curve.
■■Z or z Close the path from the current position to the beginning of the path.
The following example draws a car body by using a path that moves to 267, 76 and draws
lines by using the l (lowercase L) command.
<path d="m267 76 l-21 -4 -144 0 -90 47 0 54 11 11 23 0 15 -30 15 -10 30 0 15 10
15 30 220 0 15 -30 15 -10 30 0 15 10 15 30 l25 0 7 -7 -13 -38
-20 -10 -95 -15 z" fill="blue" id="carBody"/>In this example, the lowercase L was not repeating for each line command, which dem-
onstrates that you can specify the command once, provide parameters, provide parameters
again, and so on. The path ends with the lowercase Z command, which closes the path. The
fill color is set to blue, and the id attribute is set to carBody.
Here are two more paths, which create the front and rear windows of the car.
<path d="m65 105 l40 -25 65 0 0 34 -112 0 z" fill="white" id="rearWindow" />
<path d="m300 105 l-40 -25 -78 0 0 34 122 0 z" fill="white" id="frontWindow" />