Home

Awesome

kld-path-parser

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

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

ESM in Modern Browsers

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

Older Browsers

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

Bundlers

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

Usage

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.