# 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:

  • rx and ry are the two radii of the ellipse.
  • angle is the rotation (in degrees) of the ellipse relative to the x-axis.
  • large-arc-flag allows to chose one of the large arc (1) or small arc (0).
  • sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0).
  • x and y becomes the new current point for the next method.