Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

path-data-polyfill

1.0.3 • Public • Published

Polyfill for SVG getPathData() and setPathData() methods

Follows the working draft of the SVG Paths specification. Additionally includes the features proposed in #155.

Based on:

More info:

Usage

Print each path segment to console

let logPathSegments = (path) => {
  for (let seg of path.getPathData()) {
    if (seg.type === "M") {
      let [x, y] = seg.values;
      console.log(`${x} ${y}`);
    }
    else if (seg.type === "L") {
      let [x, y] = seg.values;
      console.log(`${x} ${y}`);
    }
    else if (seg.type === "C") {
      let [x1, y1, x2, y2, x, y] = seg.values;
      console.log(`${x1} ${y1} ${x2}${y2}${x} ${y}`);
    }
    ...
  }
};

Create a triangle path

 
let createTrianglePath = (x = 0, y = 0, width = 100, height = 200) => {
  let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
 
  let pathData = [
    { type: "M", values: [+ (width / 2), y] },
    { type: "L", values: [+ width, y + height] },
    { type: "L", values: [x, y + height] },
    { type: "Z"}
  ];
 
  path.setPathData(pathData);
  return path;
};

Convert an ellipse to a path

let ellipseToPath = (ellipse) => {
  let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
 
  for (let attribute of ellipse.attributes) {
    if (!["cx", "cy", "rx", "ry"].includes(attribute.name)) {
      path.setAttribute(attribute.name, attribute.value);
    }
  }
 
  let cx = ellipse.cx.baseVal.value;
  let cy = ellipse.cy.baseVal.value;
  let rx = ellipse.rx.baseVal.value;
  let ry = ellipse.ry.baseVal.value;
 
  let pathData = [
    {type: "M", values: [cx, cy - ry]},
    {type: "A", values: [rx, ry, 0, 0, 0, cx, cy+ry]},
    {type: "A", values: [rx, ry, 0, 0, 0, cx, cy-ry]},
    {type: "Z"}
  ];
  
  path.setPathData(pathData);
  return path;
};

Normalize a path to "M", "L", "C" and "Z" segments

let normalizePath = (path) => {
  let normalizedPathData = path.getPathData({normalize: true});
  path.setPathData(normalizedPathData);
};

install

npm i path-data-polyfill

Downloadsweekly downloads

95

version

1.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability