2008 Dec 22
The <path> element is a generalization of the basic shapes. It can draw any arbitrary shape constructed by a sequence of connected lines, arcs and curves. This boundary shape can be optionally filled and is drawn with a specified stroke. Such paths (as well as the basic shapes) may be used to define a clipping area outline or a transparency mask.
The actual shape is defined by the d (for data) attribute). The path data is a sequence of one letter commands followed by coordinate information for each command. The commands are:
| moveto | lineto | closepath | elliptical arcs | Bezier curves |
| path shortcuts | markers |
Every path must start with a M (moveto) command. By putting the data as an attribute rather than the XML notation of nested elements a more effecient (i.e. smaller) amount of information is required. Command parameters are separated by whitespace or a comma. For example:
<path d="M" 29 99 L 102 23" style=stroke: blue;"/>
The absolute moveto command is a capital M followed by the x and y coordinates. This command sets the position of the abstract drawing "pen" to the specified absolute coordinates. This command can be followed by ' one or more drawing commands such as L (lineto). If a lowercase m (moveto)) command is given the coordinate numbers are relative to the previous position (except for the very first and required moveto which is always taken as absolute coordinates).
The absolute lineto command is a capital L followed by the x and y coordinates. This command draws a straight line from the previous position to absolute specified coordinates. If a lowercase l (lineto)) command is given the coordinate numbers are relative to the previous position.
The closepath command is a capital Z or lower case z. This command draws a straight line from the current position to the first position of the current subpath.
Since one of the goals is to mimizie command size without losing flexibility, there are shortcuts to save bytes and hence bandwidth.
| shortcut | same as | meaning |
|---|---|---|
| H 29 | L 29 current_y | Draw line to absolute position (29, current_y) |
| h 29 | l 29 current_y | Draw line to relative position (current_x+29, current_y) |
| V 29 | L current_x 29 | Draw line to absolute position (current_x, 29) |
| v 29 | l current_x 29 | Draw line to relative position (current_x, current_y+29) |
There are also the following two rules:
An elliptical arc command starts with an A (using absolute coordinates) or an a (using relative coordinates) and has 7 parameters in the following order:
Other vector graphics systems use a defferent set of parameters and need conversion.
Quadratic Bezier Curves use the Q command for absolute coordinates or the q command for relative coordinates. The previous position is used followed by two more (x,y) coordinates: the control point and and the end point. Any number of pairs of control points an dend point can be a written to continue from the last end point. For example (control points are shown in bold green):
<path d="M 29 99 Q 120 47, 277 66, 300 77, 329 99"/>
This curve is not smooth (the slope changes discontinuously) between each section. The solution is the smooth quadratic curve which continues using the T (for absolute) or t (for relative) command which calculates subsequent control points to have smooth slope transitions at an inflection point; e.g.:
<path d="M 29 99 Q 120 47, 277 66, T 329 99"/>
Cubic Bezier Curves hove two control points and hence one or two inflection points. They use the C command for absolute coordinates or the c command for relative coordinates.
The technique for drawing is conceptually to draw:
An example using the two control points is:
<path d="M 20 30 C 40 45, 55 25, 70 90, 80 45, 95 35, 120 80"/>
To get a curve with smooth or continuously varying slopes use the S (or s) command which has only one control point since it uses the previous one, e.g.:
<path d="M 20 30 C 40 45, 55 25, 70 90, S 95 35, 120 80"/>
If there is no previous point then the current point is used as the control point.
When doing a fill for a curve which has multiple disjoint curves, the direction of the curve affects whether the fill rule will determine if something is inside or outside for the nonzero fill value.
To close a Bezier curve repeat the starting point.
Given a path which consists of any sequence of straight lines plus arcs and curves, it is frequently useful to put arrowhead for directions and/or various shapes to mark the path to convey information. There is a <marker> element for this purpose.
A marker is a graphic with its own internal coordinates. Thus it is necessary to specify markerWidth and markerHeight within the the <marker> tag. The elements to draw the marker are then given before the closing </marker>.
A <marker> element is not displayed by itself, and hence is normally put in a < defs> element which is used to contain reusable elements. The marker is used in a <path> by having an attribute to say where to display it and a url attribute to name the marker. In order to position the marker relative to its coordinates the <marker> element needs two more attributes refX and refY to specify its reference point.
In the following example a marker is defined and its reference point is positioned on the start of the path:
<defs>
<marker id="mCirc" markerWidth="12" markerHeight="12" refX="7" refY="7">
<circle cx="7" cy="7" r="6" style="fill: none; stroke:#000;"/>
</marker/>
</defs>
<path d="M 12 24 120 24 A 24 32 0 0 1 120 50 L 120 @@@TBD@@@