# Path element
With .add('path') an SVG path is created. This element represents the outline of a shape. All the
basic shapes can be created with a path element, but it is normally just used for more complex
shapes.
As in other cases, the method .fill() sets the interior color, .stroke() sets its
border color and .stroke_width() its border width.
The path information is described width .d and a group of special methods or directly with
.d(path_data). In order to use the latter it's necessary to pass a string with the path
data as a parameter, such as M10,30A20,20,0,0,1,50,30A20,20,0,0,1,90,30Q90,60,50,90Q10,60,10,30z.
The easiest way is to use .d methods like .d.M() or .d.L() and build the path data step by
step with these helpers. All these methods return .d and as a result, you can chain calls to
them.
Uppercase letter methods express coordinates in absolute terms, while lowercase methods express them in relative terms from the most recently declared coordinates.
Here is a short list of available methods in .d:
| Method | Name | Parameters |
|---|---|---|
.M() .m() | moveto | x, y [,...] |
.Z() .z() | closepath | none |
.L() .l() | lineto | x, y [,...] |
.H() .h() | horizontal lineto | x [,...] |
.V() .v() | vertical lineto | y [,...] |
.C() .c() | curveto | x1, y1, x2, y2, x, y [,...] |
.S() .s() | smooth curveto | x2, y2, x, y [,...] |
.Q() .q() | quadratic Bézier curveto | x1, y1, x, y [,...]) |
.T() .t() | smooth quadratic Bézier curveto | x, y [,...] |
.A() .a() | arc | rx, ry, rot, arc-flag, sweep-flag, x, y, [,...] |
# moveto
The moveto methods (.M(x, y) or .m(x, y)) establish a new point, as if lifting the pen and
starting to draw a new subpath in a new location. The second x,y pair and subsequent ones are
treated as path points, and a straight line is drawn between these points.
# closepath
The closepath methods (.Z() or .z(), both are identical) end the current subpath and draw a
line from that point to the initial point of this subpath.
# lineto
The lineto methods (.L(x, y), .l(x, y), .H(x), .h(x), .V(y), .v(y)) draw straight lines
from the current point to a new point.
# Curve methods
There are three groups of .d methods that draw curved paths: Cubic Bézier (.C(), .c(),
.S(), .s()), Quadratic Bézier (.Q(), .q(), .T(), .t()), and Elliptical arc (.A(),
.a()).
# Cubic Bézier
The .C(x1, y1, x2, y2, x, y) and .c(x1, y1, x2, y2, x, y) methods draw a cubic Bézier curve
from the current point to the end point specified by x and y. The start control point is specified
by x1 and y1 and the end control point is specified by x2 and y2.
The S(x2, y2, x, y) and s(x2, y2, x, y) methods also draw a Cubic Bézier curve, but in this
case the start control point is a reflection of the previous curve method.
# Quadratic Bézier
Quadratic Bézier curves defined by Q(x1, y1, x, y), q(x1, y1, x, y), T(x, y), t(x, y)
methods are similar to Cubic Bézier curves except that they only have one control point.
The T(x, y) and t(x, y) methods also draw a Quadratic Bézier curve, but in this
case the control point is a reflection of the previous curve method.
# Elliptical Arc
An Elliptical Arc methods A(rx, ry, angle, large-arc-flag, sweep-flag, x, y) and
A(rx, ry, angle, large-arc-flag, sweep-flag, x, y) defines a segment of an ellipse with this
values:
rxandryare the two radii of the ellipse.angleis the rotation (in degrees) of the ellipse relative to the x-axis.large-arc-flagallows to chose one of the large arc (1) or small arc (0).sweep-flagallows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0).xandybecomes the new current point for the next method.