# kld-path-parser

> Event-driven SVG path data parser

Latest version **0.2.1** (published 2019-05-09) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install kld-path-parser
pnpm add kld-path-parser
yarn add kld-path-parser
bun add kld-path-parser
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2019-05-09 |
| First published | 2013-08-04 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 10.15.3 |
| Dependencies | 0 |
| Unpacked size | 116.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Kevin Lindsey |
| Maintainers | thelonious |
| Keywords | paths, parser, SVG |

## Links

- npm: https://www.npmjs.com/package/kld-path-parser
- Repository: https://github.com/thelonious/kld-path-parser
- Issues: https://github.com/thelonious/kld-path-parser/issues
- npm.io page: https://npm.io/package/kld-path-parser

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2019-05-09
- 0.2.0 — 2019-05-08
- 0.1.1 — 2019-05-07
- 0.0.2 — 2017-07-23
- 0.0.1 — 2013-08-04

## README

# kld-path-parser

- [Installation](#installation)
- [Importing](#importing)
- [Usage](#usage)
- [Custom Handlers](#custom-handlers)

---

An event-driven SVG path data parser.

# Installation

```npm install kld-path-parser```

# Importing

The following sections indicate how you can import the code for use in various environments.

## Node

```javascript
import {PathParser, SampleHandler} = require("kld-path-parser");
```

## ESM in Modern Browsers

```javascript
import {PathParser, SampleHandler} from './node_modules/kld-path-parser/dist/index-esm.js';
```

## Older Browsers

```html
<script src="./node_modules/kld-path-parser/dist/index-umd.js"></script>
<script>
  var PathParser = KldPathParser.PathParser;
  var SampleHandler = KldPathParser.SampleHandler;
</script>
```

## Bundlers

```javascript
import {AffineShapes, Shapes, Intersection} from "kld-path-parser";
```

# Usage

```javascript
import {PathParser, SampleHandler} from "kld-path-parser";

const parser = new PathParser();
const handler = new SampleHandler());
const pathData = "M40,70 Q50,150 90,90 T135,130 L160,70 C180,180 280,55 280,140 S400,110 290,100";

parser.setHandler(handler);
parser.parseData(pathData);

console.log(handler.logs.join("\n"));
```

## Result

```
movetoAbs(40,70)
curvetoQuadraticAbs(50,150,90,90)
curvetoQuadraticSmoothAbs(135,130)
linetoAbs(160,70)
curvetoCubicAbs(180,180,280,55,280,140)
curvetoCubicSmoothAbs(400,110,290,100)
```

# Custom Handlers

When creating your own event handler, you will need to define methods for each event you wish to listen for. Below is a list of all events (method names) that may be fired during a parse.

- beginParse()
- endParse()
- arcAbs(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y)
- arcRel(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y)
- curvetoCubicAbs(x1, y1, x2, y2, x, y)
- curvetoCubicRel(x1, y1, x2, y2, x, y)
- linetoHorizontalAbs(x)
- linetoHorizontalRel(x)
- linetoAbs(x, y)
- linetoRel(x, y)
- movetoAbs(x, y)
- movetoRel(x, y)
- curvetoQuadraticAbs(x1, y1, x, y)
- curvetoQuadraticRel(x1, y1, x, y)
- curvetoCubicSmoothAbs(x2, y2, x, y)
- curvetoCubicSmoothRel(x2, y2, x, y)
- curvetoQuadraticSmoothAbs(x, y)
- curvetoQuadraticSmoothRel(x, y)
- linetoVerticalAbs(y)
- linetoVerticalRel(y)
- closePath()

---
_Source: https://npm.io/package/kld-path-parser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._