https://github.com/ppvg/svg-path

Manipulate SVG <path> data.
https://github.com/ppvg/svg-path

Last synced: about 1 month ago
JSON representation

Manipulate SVG <path> data.

• Host: GitHub
• URL: https://github.com/ppvg/svg-path
• Owner: ppvg
• License: mit
• Created: 2013-11-28T11:56:54.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-12-03T22:45:27.000Z (over 11 years ago)
• Last Synced: 2024-04-25T07:43:11.001Z (about 1 year ago)
• Language: JavaScript
• Size: 137 KB
• Stars: 16
• Watchers: 3
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-path

Parse and manipulate SVG ``s.

[![NPM version](https://badge.fury.io/js/svg-path.png)](http://badge.fury.io/js/svg-path) [![Build status](https://travis-ci.org/PPvG/svg-path.png?branch=master)](https://travis-ci.org/PPvG/svg-path)

## Usage example

### Parsing

    var svgPath = require('svg-path')

    var pathData = 'm100,1e2C125,100 130,110 150,150l-25-75z'

    var path = svgPath(pathData) // creates a new svgPath.Path

    console.log(path.content)

    /*

        [

           { type: 'M', relative: false, x: 100, y: 100 },

           { type: 'C', relative: false,

             x1: 125, y1: 100, x2: 130, y2: 110, x: 150, y: 150 },

           { type: 'L', relative: true,  x: -25, y: -75 },

           { type: 'Z' }

        ]

    */

### Applying transformations

    var path = svgPath(pathData)

    path.abs()

    path.matrix(1, 0, 0, 1, 100, 50) // same as translate(100, 50)

Transformations are applied in-place. To retain the original, create a copy first:

    var newPath = path.copy()

Available transformations are `abs`, `translate`, `scale`, `rotate`, `skewX` and `skewY` and `convertArcs`. The latter converts all `A` (arc) commands to `C` (curveto) commands. All transformations expect `#abs()` start by calling `#convertArcs`.

## Running the tests

    $ git clone https://github.com/PPvG/svg-path

    $ cd svg-path

    $ npm install

    $ npm test

### Code coverage report

    $ npm run cover

Then open `./cov/report.html` in your browser.

## License

[MIT](https://raw.github.com/PPvG/svg-path/master/LICENSE)