Game Development Reference
In-Depth Information
•
Q
: quadratic Bezier curve
•
T
: smooth quadratic Bezier curve
•
A
: elliptical arc
•
Z
: close path
These attributes can be repeated as many times as needed, although it may be a
good idea to break down the overall drawing into multiple smaller paths. Some reas-
ons to separate a larger drawing into multiple paths are to make the figure more
manageable, easier to troubleshoot, and easier to understand. The code for this is
as follows:
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="1000" height="1000">
<path
d="M 100 100
L 100 300
M 250 100
L 250 300
M 400 100
L 400 300"
fill="transparent"
stroke-width="45"
stroke="#333" />
</svg>
Unless you practice and train yourself to look at path descriptions, it may be hard
to just look at those codes and visualize the path. Take your time and look at each
attribute individually. The preceding example first moves the pointer to point (100,
100), then a line is drawn from that point to another point (100, 300). This makes
a vertical line from the last position where the pointer was, to the point specified by
the line to attribute. Next, the cursor is changed from where it was to a new position
(250, 100). Note that simply moving the cursor doesn't affect any previous drawing
calls, nor does it do any drawing at that time. Finally, a second vertical line is drawn
to point (250, 300). A third line is drawn at an equal distance from the first line. This
can be seen in the following screenshot:
