You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP

path-data-polyfill

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

path-data-polyfill

Polyfill for SVG 2 getPathData() and setPathData() methods

1.0.3
Version published
Weekly downloads
14K
-9.86%
Maintainers
1
Weekly downloads
 
Created

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(`M ${x} ${y}`);
    }
    else if (seg.type === "L") {
      let [x, y] = seg.values;
      console.log(`L ${x} ${y}`);
    }
    else if (seg.type === "C") {
      let [x1, y1, x2, y2, x, y] = seg.values;
      console.log(`C ${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: [x + (width / 2), y] },
    { type: "L", values: [x + 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);
};

FAQs

Package last updated on 24 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts