ps
path-svg
npm i path-svg
ps

path-svg

Chainable SVG path string generator with some sugar added

by Igor Zalutski

0.2.1 (see all)License:MITTypeScript:Not Found
npm i path-svg
Readme

SvgPath

Chainable SVG path string generator with some sugar added
  • Under 1kb minified and gzipped
  • Supports Node, AMD and browser environments (EcmaScript 5 or newer, shims should also work)
  • No dependencies

Writing SVG paths by hand is intuitively easy (see W3 spec):

<path class="SamplePath" d="M100,200 C100,100 250,100 250,200 S400,300 400,200" />

However, dynamic generation of path strings can be tricky and look ugly since most graphic algorithms utilize points, vectors and matrices, not just plain coordinates. That's where SvgPath can help:

//start, control1, control2, middle are point objects with x and y properties
var path = SvgPath().to(start)
              .bezier3(control1, control2, middle)
              .bezier3(x1, y1, x2, y2).str();

Single-letter SVG methods are also supported (both absolute and relative):

var path = SvgPath().M(100, 200)
              .C(100, 100, 250, 100, 250, 200)
              .S(400, 300, 400, 200).str();

Relative and absolute modes for convenience methods:

var absolute = SvgPath().to(1000, 1000).hline(1010).vline(1010).hline(1000).close();
var relative = SvgPath().to(1000, 1000).rel().hline(10).vline(10).hline(-10).close();

Changelog

0.2.0

  • Added point support
  • Minor fixes

0.1.1

  • Fixed shortcut detection

0.1.0

  • Initial release

Downloads/wk

4

GitHub Stars

30

LAST COMMIT

7yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

3

OPEN PRs

0
VersionTagPublished
0.2.1
latest
9yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate