build svg path data in a declarative way
npm install svg-path-builderminimal utility for building path data using a declarative api.
bash
$ yarn add svg-path-builder
`$3
`javascript
import PathBuilder from 'svg-path-builder';function renderSvgPath() {
const pathData = new PathBuilder()
.moveTo(10, 10)
.lineTo(20, 20)
.relative()
.horizontalLineTo(100)
.toString()
return
}
`$3
####
new PathBuilder()
create an instance of the path builder-
relative() switch to relative path mode
- aboslute() switch to absolute path mode
- moveTo(x, y) move to position without drawing a line
- lineTo(x, y) draw a line from current position to point(x, y)
- horizontalLineTo(x) draw line from current position to point(x, currentY)
- verticalLineTo(y) draw a line from current position to point(currentX, y);
- toString() return the path as an Svg formatted string (e.g. d={path.toString())`)Note:
I quickly wrote this for a particular use case, so there is currently no support for Curve or Arc path data.
It would be very simple to add, which I will hopefully have time to to get to. Otherwise feel free to PR.