Draw a simple svg shape with a line path
Not hosted on npm registry because the name was already taken
npm i jeromedecoster/svg-line| Option | Action |
|---|---|
| w | svg width |
| h | svg height |
| d | direction of the drawing — top, right, bottom, left |
| p1 | first point |
| p2 | second point |
const Line = require('svg-line')
var line = new Line({p1:10, p2:50, w:100, h:200})
// also allowed
var line = Line({p1:10, p2:50, w:100, h:200})
// all options are also accessible via getter/setter
line.d = 'top'
line.p1 = 100Return svg node
var line = Line({p1:10, p2:50, w:100, h:200})
/*
<svg viewBox="0 0 100 200" preserveAspectRatio="none">
<path d="M0 0 V10 L100 50 V0 z"></path>
</svg>
*/
var svg = line.svg()Return path value
var line = Line({p1:10, p2:50, w:100, h:200})
line.p1 = 20
// M0 0 V20 L100 50 V0 z
var path = line.path()npm i && npm startMainly forked / inspired on Codrops and Isaac Montemayor
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent