|
|
SVG 'path' element
The SVG <path> element is used for drawing of advanced shapes combined with lines and arcs. The
<path> element has 2 attributes:
-
d attribute or path data specifies all drawings inside the <path> element be means of
its commands.
The d attribute contains the moveto, line, curve (both cubic and quadratic Beziers), arc
and closepath instructions. The instructions are expressed with one character that can be omitted if the same command is used
several times in a row. Uppercase character means absolute coordinates, lowercase means relative coordinates.
pathLength attribute provides the total length of the path.
The path data has the following commands:
| Command |
Parameters |
Name |
Description |
| M/m |
x, y |
moveto |
Establishes a new current point at the given coordinates withought drawing. when it is not the first command, starts a new sub-path
at the given (x,y) coordinate.
|
| Z/z |
none |
closepath |
Ends the current subpath drawing automatically straight line from the current point to the initial point of the current subpath. |
| L/l |
x, y |
lineto |
Draws a line from the current point to the given (x,y) coordinate. A new point becomes the current point. |
| H/h |
x |
horizontal lineto |
Draws a horizontal line from the current point to the point that has the given x coordinate.
The y coordinate remains the same.
|
| V/v |
y |
vertical lineto |
Draws a vertical line from the current point to the point that has the given y coordinate.
The x coordinate remains the same. |
| C/c |
x1, y1 x2, y2 x, y |
curveto |
Draws a cubic Bezier curve from the current point to (x,y) using (x1,y1) and (x2,y2) as
the control points at the beginning and at the end of the curve. The (x,y) point becomes a new current point.
|
| S/s |
x2, y2 x, y |
smooth/shorthand curveto |
(x2,y2) is the control point at the end of the curve that is drawn from the current point to (x,y). |
| Q/q |
x1, y1 x, y |
quadratic Bezier curveto |
Draws a quadratic Bezier curve from the current point to (x,y) using (x1,y1) as the control point.
The (x,y) point becomes a new current point.
|
| T/t |
x, y |
smooth/shorthand quadratic Bezier curveto |
Draws a quadratic Bezier curve from the current point to (x,y). The control point is assumed to be the reflection
of the control point on the previous command relative to the current point or the current point could be the control one.
|
| A/a |
rx, ry x-axis-rotation large-arc-flag sweep-flag x y |
elliptical arc |
Draws an elliptical arc from the current point to (x, y). rx and ry are two radii that define
the size and orientation of the ellipse. An x-axis-rotation indicates how the ellipse is rotated relative to the current
coordinate system. The center (cx, cy) of the ellipse is calculated automatically. large-arc-flag and sweep-flag
help the automatic calculations and determine how the arc is drawn if arcs cross.
|
Here is an example that shows the usage of lineto, quadratic Bezier curveto and elliptical arc commands:
<path d="M10,40 A20 30 180 0 1 30 10 A20 30 0 0 1 30 70 A20 30 0 0 1 40 10 A20 30 0 0 1 40 70 A20 30 0 0 1 50 10 A20 30 0 0 1 70 40 L100 40 Q110 10 120 50" fill="none" stroke="#9d1d20" stroke-width="2"/>
Here is the resulting image:
For more examples see SVG examples page
|
|
