Path

Draws an arbitrary shape in a layer using SVG path data. Supports filled shapes, stroked outlines, and complex curves.

Attributes

Attribute	Type	Default	Description
d	string	—	Required. SVG path data (M, L, H, V, C, Q, Z)
fill	color or gradient:name	—	Fill: a color, or a gradient that spans the path’s bounding box
stroke	color	—	Stroke color
fill-rule	string	nonzero	nonzero or evenodd
stroke-width	pt	—	Stroke width
stroke-dash	string	—	Dash pattern
line-cap	string	butt	butt round square

A path has no box, so it does not support anchor. Use absolute coordinates in the d attribute. To fade a path, put it in a layer with opacity.

Triangle

XML

<layer opacity="0.8">
  <path d="M 200pt 100pt L 350pt 300pt L 50pt 300pt Z" fill="#1a73e8"/>
</layer>

Node.js

L.layer({ opacity: '0.8' }, [
    L.path({ d: 'M 200pt 100pt L 350pt 300pt L 50pt 300pt Z', fill: '#1a73e8' }),
])

Python

L.layer(LayerAttr(opacity='0.8'), [
    L.path(PathAttr(d='M 200pt 100pt L 350pt 300pt L 50pt 300pt Z', fill='#1a73e8'))
])

PHP

L::layer(new LayerAttr(opacity: '0.8'), [
    L::path(new PathAttr(d: 'M 200pt 100pt L 350pt 300pt L 50pt 300pt Z', fill: '#1a73e8')),
])

.NET

L.Layer(new() { Opacity = "0.8" }, [
    L.Path(new() { D = "M 200pt 100pt L 350pt 300pt L 50pt 300pt Z", Fill = "#1a73e8" }),
])

Arrow shape (stroked)

XML

<path d="M 40pt 200pt L 200pt 200pt M 180pt 185pt L 200pt 200pt L 180pt 215pt"
      stroke="#333333" stroke-width="2pt" line-cap="round"/>

Node.js

L.path({ d: 'M 40pt 200pt L 200pt 200pt M 180pt 185pt L 200pt 200pt L 180pt 215pt', stroke: '#333333', strokeWidth: '2pt', lineCap: 'round' })

Python

L.path(PathAttr(d='M 40pt 200pt L 200pt 200pt M 180pt 185pt L 200pt 200pt L 180pt 215pt', stroke='#333333', stroke_width='2pt', line_cap='round'))

PHP

L::path(new PathAttr(d: 'M 40pt 200pt L 200pt 200pt M 180pt 185pt L 200pt 200pt L 180pt 215pt', stroke: '#333333', strokeWidth: '2pt', lineCap: 'round'))

.NET

L.Path(new() { D = "M 40pt 200pt L 200pt 200pt M 180pt 185pt L 200pt 200pt L 180pt 215pt", Stroke = "#333333", StrokeWidth = "2pt", LineCap = "round" })

Complex shape with a hole (evenodd fill rule)

XML

<layer opacity="0.6">
  <path d="M 100pt 100pt L 300pt 100pt L 300pt 300pt L 100pt 300pt Z
           M 150pt 150pt L 250pt 150pt L 250pt 250pt L 150pt 250pt Z"
        fill="#1a73e8" fill-rule="evenodd"/>
</layer>

Node.js

L.layer({ opacity: '0.6' }, [
    L.path({ d: 'M 100pt 100pt L 300pt 100pt L 300pt 300pt L 100pt 300pt Z            M 150pt 150pt L 250pt 150pt L 250pt 250pt L 150pt 250pt Z', fill: '#1a73e8', fillRule: 'evenodd' }),
])

Python

L.layer(LayerAttr(opacity='0.6'), [
    L.path(PathAttr(d='M 100pt 100pt L 300pt 100pt L 300pt 300pt L 100pt 300pt Z            M 150pt 150pt L 250pt 150pt L 250pt 250pt L 150pt 250pt Z', fill='#1a73e8', fill_rule='evenodd'))
])

PHP

L::layer(new LayerAttr(opacity: '0.6'), [
    L::path(new PathAttr(d: 'M 100pt 100pt L 300pt 100pt L 300pt 300pt L 100pt 300pt Z            M 150pt 150pt L 250pt 150pt L 250pt 250pt L 150pt 250pt Z', fill: '#1a73e8', fillRule: 'evenodd')),
])

.NET

L.Layer(new() { Opacity = "0.6" }, [
    L.Path(new() { D = "M 100pt 100pt L 300pt 100pt L 300pt 300pt L 100pt 300pt Z            M 150pt 150pt L 250pt 150pt L 250pt 250pt L 150pt 250pt Z", Fill = "#1a73e8", FillRule = "evenodd" }),
])

SVG path command reference

Command	Description
M x y	Move to
L x y	Line to
H x	Horizontal line to
V y	Vertical line to
C x1 y1 x2 y2 x y	Cubic Bézier
Q x1 y1 x y	Quadratic Bézier
Z	Close path

Lowercase commands use relative coordinates.

Arcs (A) and the smooth curves S and T are not supported. The engine skips a command it does not know, without an error, so a path that uses one is drawn incompletely. Build arcs from C curves.