How to get css clip-path coordinates from SVG?

Question

css

I don’t know how to correctly formulate the question, but the essence is this:
We have some svg => path="M........z" .
I want to get css => clip-path from it .
Of course, I turned down Google and Yandex, but I don’t know if I write the correct search tags.
Wrote like this: svg path to clip-path .....
Found such a plugin in NPM : https://www.npmjs.com/package/clip-svg Is there any way to get clip-path css from SVG? Or experienced in js explain how to use this gadget with NPM This is js from NPM

#!/usr/bin/env node

var fs = require('fs');
var file = process.argv[2];

function round(x) {
  return parseFloat(x.toFixed(2));
}

function bail(errorMsg) {
  console.log(errorMsg);
  process.exit(1);
}

function descriptor2clipPath(descriptor) {
  // Divide string into coordinate strings
  var points = descriptor.split(' ');
  // Divide these strings into arrays of float pairs ([x1, y1], [x2, y2], ...)
  points = points.map(value => value.split(',').map((string) => {
    return round(parseFloat(string));
  }));

  for (var key in points) {
    if ([0, 1].some((index) => isNaN(points[key][index]))) {
      bail('Error: Malformed descriptor');
    }
  }

  var start = points[0];
  var relativePoints = points.slice(1);
  // Convert relative points to absolute points
  var sum = start.map((value) => round(value));
  var absolutePoints = relativePoints.map(pair => {
    sum = pair.map(function (num, i) {
      return round(num + sum[i]);
    });
    return sum;
  });
  var newPoints = [start].concat(absolutePoints);
  var polygonString = 'clip-path: polygon('
  newPoints.forEach((point) => {
    polygonString += `${point[0]}% ${point[1]}%,`
  });
  polygonString = polygonString.slice(0, -1) + ');'
  console.log(polygonString);
}

if (!file || !fs.existsSync(file)) {
  bail('Usage: clip-path [SVG file]');
}

fs.readFile( file, 'utf8', function (err, buffer) {
  if ( err ) { bail('Error: File I/O'); }

  // Parse for SVG path descriptor
  var descriptors = buffer.match(/ d="m ([^z]*) z"/g);

  if (!descriptors || descriptors.length === 0) {
    bail('Error: no matches');
  }

  descriptors = descriptors.map((descriptor) => descriptor.slice(6, -3));

  descriptors.forEach((descriptor) => {
    descriptor2clipPath(descriptor);
  });
});

Answer 1

Take a picture, draw an arbitrary path (in red) on top of it , which we will use as clip-path
Select all the points that we want to convert to straight segments and apply Object -> Path -> Add Anchor Points to them several times
Convert points: first to "to smooth", then to "to corner"
At this stage, you should get a polygon without rounded segments, only straight segments.
We finish drawing a rectangle (blue) on the background according to the size of the picture and group our polygon and rectangle.
Disable Illustrator's pixel grid alignment and set the group size to 1px x 1px
We export the resulting thing, we set the accuracy of the curves to at least 2 decimal places, but a little more is better.
Open the resulting SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
  <defs>
    <style>
      .cls-1 {
        fill: blue;
      }

      .cls-2 {
        fill: red;
        opacity: 0.7;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <g>
        <rect class="cls-1" width="1" height="1"/>
        <polygon class="cls-2" points="0.755 0.346 0.763 0.326 0.768 0.304 0.772 0.28 0.773 0.255 0.765 0.191 0.741 0.138 0.706 0.103 0.663 0.09 0.631 0.097 0.602 0.118 0.579 0.149 0.562 0.19 0.551 0.175 0.538 0.164 0.524 0.157 0.508 0.155 0.479 0.164 0.455 0.188 0.439 0.224 0.433 0.267 0.433 0.272 0.434 0.276 0.434 0.281 0.434 0.285 0.346 0.285 0.257 0.285 0.169 0.285 0.08 0.285 0.08 0.422 0.08 0.56 0.08 0.698 0.08 0.835 0.243 0.835 0.407 0.835 0.57 0.835 0.733 0.835 0.733 0.791 0.733 0.747 0.733 0.703 0.733 0.659 0.735 0.66 0.737 0.66 0.74 0.66 0.742 0.66 0.783 0.648 0.816 0.614 0.838 0.564 0.847 0.502 0.84 0.446 0.82 0.398 0.791 0.364 0.755 0.346"/>
      </g>
    </g>
  </g>
</svg>

the only polygon is our clip-path, it remains to multiply the numbers by 100, draw the "%" sign and split the numbers in pairs by inserting commas between them.

"0.755 0.346 0.763 0.326 0.768 0.304 0.772 0.28 0.773 0.255 0.765 0.191 0.741 0.138 0.706 0.103 0.663 0.09 0.631 0.097 0.602 0.118 0.579 0.149 0.562 0.19 0.551 0.175 0.538 0.164 0.524 0.157 0.508 0.155 0.479 0.164 0.455 0.188 0.439 0.224 0.433 0.267 0.433 0.272 0.434 0.276 0.434 0.281 0.434 0.285 0.346 0.285 0.257 0.285 0.169 0.285 0.08 0.285 0.08 0.422 0.08 0.56 0.08 0.698 0.08 0.835 0.243 0.835 0.407 0.835 0.57 0.835 0.733 0.835 0.733 0.791 0.733 0.747 0.733 0.703 0.733 0.659 0.735 0.66 0.737 0.66 0.74 0.66 0.742 0.66 0.783 0.648 0.816 0.614 0.838 0.564 0.847 0.502 0.84 0.446 0.82 0.398 0.791 0.364 0.755 0.346"
  .split(' ')
  .map((p, i) => Math.round(Number(p) * 10000) / 100 + '%' + ((i % 2) ? ',' : ''))
  .join(' ')
// '75.5% 34.6%, 76.3% 32.6%, 76.8% 30.4%, 77.2% 28%, 77.3% 25.5%, 76.5% 19.1%, 74.1% 13.8%, 70.6% 10.3%, 66.3% 9%, 63.1% 9.7%, 60.2% 11.8%, 57.9% 14.9%, 56.2% 19%, 55.1% 17.5%, 53.8% 16.4%, 52.4% 15.7%, 50.8% 15.5%, 47.9% 16.4%, 45.5% 18.8%, 43.9% 22.4%, 43.3% 26.7%, 43.3% 27.2%, 43.4% 27.6%, 43.4% 28.1%, 43.4% 28.5%, 34.6% 28.5%, 25.7% 28.5%, 16.9% 28.5%, 8% 28.5%, 8% 42.2%, 8% 56%, 8% 69.8%, 8% 83.5%, 24.3% 83.5%, 40.7% 83.5%, 57% 83.5%, 73.3% 83.5%, 73.3% 79.1%, 73.3% 74.7%, 73.3% 70.3%, 73.3% 65.9%, 73.5% 66%, 73.7% 66%, 74% 66%, 74.2% 66%, 78.3% 64.8%, 81.6% 61.4%, 83.8% 56.4%, 84.7% 50.2%, 84% 44.6%, 82% 39.8%, 79.1% 36.4%, 75.5% 34.6%,'

Remove the extra comma at the end and paste this line into the CSS clip-path