Documentation / @ripl/svg / SVGPath

Class: SVGPath

Defined in: svg/src/index.ts:279

SVG-specific path implementation that builds an SVG d attribute string from drawing commands.

Extends

• ContextPath

Implements

• SVGContextElement

Constructors

Constructor

new SVGPath(id?): SVGPath

Defined in: svg/src/index.ts:284

Parameters

Parameter	Type
id?	string

Returns

SVGPath

Overrides

ContextPath.constructor

Properties

Property	Modifier	Type	Description	Inherited from	Defined in
definition	public	SVGContextElementDefinition	The rendering definition describing this path's SVG <path> node.	-	svg/src/index.ts:282
id	readonly	string	Unique identifier for this path, used for SVG element diffing between frames.	SVGContextElement.id ContextPath.id	core/src/context/path.ts:20

Methods

addPath()

addPath(path): void

Defined in: core/src/context/path.ts:90

Appends the drawing commands of another path to this path.

Parameters

Parameter	Type
path	ContextPath

Returns

void

Inherited from

ContextPath.addPath

---

arc()

arc(x, y, radius, startAngle, endAngle, counterclockwise?): void

Defined in: svg/src/index.ts:304

Adds an arc centred at (x, y) with the given radius to the path.

Parameters

Parameter	Type
x	number
y	number
radius	number
startAngle	number
endAngle	number
counterclockwise?	boolean

Returns

void

Overrides

ContextPath.arc

---

arcTo()

arcTo(x1, y1, x2, y2, radius): void

Defined in: svg/src/index.ts:315

Adds an arc connecting two tangents defined by the given points to the path.

Parameters

Parameter	Type
x1	number
y1	number
x2	number
y2	number
radius	number

Returns

void

Overrides

ContextPath.arcTo

---

bezierCurveTo()

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): void

Defined in: svg/src/index.ts:328

Adds a cubic Bézier curve to the path.

Parameters

Parameter	Type
cp1x	number
cp1y	number
cp2x	number
cp2y	number
x	number
y	number

Returns

void

Overrides

ContextPath.bezierCurveTo

---

circle()

circle(x, y, radius): void

Defined in: svg/src/index.ts:321

Adds a full circle centred at (x, y) to the path.

Parameters

Parameter	Type
x	number
y	number
radius	number

Returns

void

Overrides

ContextPath.circle

---

closePath()

closePath(): void

Defined in: svg/src/index.ts:333

Closes the current sub-path with a straight line back to its start.

Returns

void

Overrides

ContextPath.closePath

---

ellipse()

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?): void

Defined in: svg/src/index.ts:338

Adds an elliptical arc centred at (x, y) to the path.

Parameters

Parameter	Type
x	number
y	number
radiusX	number
radiusY	number
rotation	number
startAngle	number
endAngle	number
counterclockwise?	boolean

Returns

void

Overrides

ContextPath.ellipse

---

lineTo()

lineTo(x, y): void

Defined in: svg/src/index.ts:376

Adds a straight line from the current point to (x, y).

Parameters

Parameter	Type
x	number
y	number

Returns

void

Overrides

ContextPath.lineTo

---

moveTo()

moveTo(x, y): void

Defined in: svg/src/index.ts:381

Moves the current point to (x, y) without adding a line.

Parameters

Parameter	Type
x	number
y	number

Returns

void

Overrides

ContextPath.moveTo

---

polyline()

polyline(points): void

Defined in: core/src/context/path.ts:82

Adds a connected series of straight line segments through the given points.

Parameters

Parameter	Type
points	Point[]

Returns

void

Inherited from

ContextPath.polyline

---

quadraticCurveTo()

quadraticCurveTo(cpx, cpy, x, y): void

Defined in: svg/src/index.ts:386

Adds a quadratic Bézier curve to the path.

Parameters

Parameter	Type
cpx	number
cpy	number
x	number
y	number

Returns

void

Overrides

ContextPath.quadraticCurveTo

---

rect()

rect(x, y, width, height): void

Defined in: svg/src/index.ts:391

Adds a rectangle to the path.

Parameters

Parameter	Type
x	number
y	number
width	number
height	number

Returns

void

Overrides

ContextPath.rect

---

roundRect()

roundRect(x, y, width, height, radii?): void

Defined in: svg/src/index.ts:400

Adds a rounded rectangle to the path, using the given corner radii.

Parameters

Parameter	Type
x	number
y	number
width	number
height	number
radii?	BorderRadius

Returns

void

Overrides

ContextPath.roundRect