jarek-foksa/path-data-polyfill

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}`);
    }
    ...
  }
};

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;
};

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;
};

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