How to know the m or M point of path from all of points in svg?(use raphael.js)

Question

I have an svg picture like this, with M and m in the path. I use raphael.js to calculate. I can get all the points by calling Raphael.getTotalLength(path), but how can I know from which point is the path behind m. I want to know all the absolute coordinate points of the inner border of the svg, so that I can get a data format similar to the following [[points of the outer border], [points of the inner border]].

This is how I achieved it. I can get all the points, but I can’t distinguish which are the points of the inner frame and which are the points of the outer frame.

import Raphael from 'raphael';    

function getPoints(path) {
    let points = [];
    for (let i = 0; i < Raphael.getTotalLength(path); i += step_point) {
        const point = Raphael.getPointAtLength(path, i);
        points.push(point);
    }
}

This is the svg content:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <path
    d="M72.8525 8.0439c-.405 0-.816.022-1.222.064-4.973.523-8.939 4.112-10.048 8.833-.73-.028-1.453-.043-2.162-.043-5.453 0-10.307.814-14.464 2.423-1.988-3.703-5.849-6.071-10.173-6.071-.973 0-1.949.124-2.899.37-2.994.773-5.508 2.667-7.078 5.331-1.571 2.664-2.01 5.781-1.236 8.775.772 2.986 2.693 5.506 5.301 7.052-1.056 2.419-1.535 4.533-1.814 6.02-.623 3.314-2.519 13.398 5.355 20.728 3.209 2.988 6.672 4.84 10.937 5.8-3.558 4.888-7.226 11.138-8.02 16.945-.349 2.543-.027 4.749.956 6.576l-.149.355c-.034.081-.062.165-.085.25-.315 1.166-.025 2.398.778 3.295.672.754 1.639 1.187 2.649 1.187.044 0 .088-.001.131-.002.27.406.626.758 1.053 1.029.518.33 1.109.519 1.719.55l-1.044 4.167c-.571 2.283.813 4.636 3.086 5.245l10.106 2.708c.372.1.753.15 1.132.15 1.299 0 2.521-.582 3.351-1.595.825-1.008 1.151-2.32.894-3.6-.013-.064-.007-.13.016-.189l1.1-2.829 3.729 6.22c.78 1.3 2.206 2.109 3.723 2.109.759 0 1.509-.202 2.168-.582l9.061-5.232c1.308-.756 2.119-2.108 2.167-3.619.03-.959-.249-1.873-.779-2.627.6-.052 1.175-.255 1.679-.595.42-.283.766-.644 1.024-1.058h.035c1.047 0 2.037-.459 2.713-1.259.778-.92 1.035-2.16.687-3.318-.025-.084-.056-.166-.092-.246l-.158-.35c.933-1.854 1.194-4.068.777-6.6-1.181-7.17-6.763-14.845-10.84-19.646 1.556-.529 3.061-1.122 4.547-1.793 6.708-3.027 9.062-8.913 9.395-11.913.346-3.113-.969-9.08-2.01-12.015-1.056-2.977-3.244-8.332-6.599-12.674 1.647-2.29 2.406-5.105 2.106-7.957-.621-5.911-5.566-10.369-11.503-10.369m0 2c4.84 0 8.997 3.657 9.514 8.578.312 2.97-.769 5.764-2.716 7.735 4.039 4.59 6.48 11.006 7.313 13.355 1.049 2.957 2.192 8.566 1.908 11.126-.285 2.56-2.435 7.696-8.23 10.311-2.229 1.006-4.658 1.897-7.363 2.639.216.171.429.348.617.556 3.231 3.599 10.589 12.513 11.888 20.392.453 2.753-.065 4.727-1.052 6.153l.583 1.294c.149.498.04 1.049-.299 1.451-.296.349-.728.55-1.186.55-.367 0-.722-.13-1.002-.367-.127-.107-.234-.231-.32-.372l-.182-.406c-.053.03-.108.056-.161.085l.17 1.142c.01.521-.245 1.023-.682 1.318-.258.174-.558.266-.867.266-.518 0-.999-.256-1.288-.685-.093-.138-.163-.287-.208-.447l-.078-.525s0 .001-.001.001c-.092.021-.184.022-.277.035-.125.259-.314.488-.566.645-.247.154-.531.235-.82.235-.22 0-.427-.055-.621-.14l1.058 2.404c.18.409.472.758.845 1.006 1.444.961 1.377 3.104-.126 3.973l-9.061 5.23c-.368.213-.77.315-1.168.315-.795 0-1.57-.407-2.008-1.137l-4.403-7.347c-.752-.015-1.524-.056-2.306-.11l-1.698 4.368c-.163.417-.202.87-.114 1.309.3 1.49-.864 2.801-2.284 2.801-.201 0-.407-.026-.614-.082l-10.106-2.708c-1.234-.33-1.974-1.589-1.664-2.827l1.907-7.612c-.062-.027-.127-.044-.185-.077-.256-.151-.451-.374-.584-.631-.092-.01-.185-.009-.278-.027 0 0-.001 0-.001-.001l-.065.532c-.04.159-.105.309-.193.448-.287.45-.777.72-1.312.72-.294 0-.582-.084-.832-.243-.444-.283-.713-.777-.717-1.298l.139-1.147c-.054-.027-.11-.052-.163-.081l-.174.415c-.082.142-.184.268-.307.377-.285.254-.652.395-1.034.395-.441 0-.864-.19-1.158-.519-.35-.392-.474-.939-.339-1.441l.548-1.311c-1.026-1.397-1.598-3.356-1.219-6.121.917-6.699 6.151-14.247 9.637-18.644-4.885-.547-9.142-2.083-13.173-5.836-6.746-6.28-5.521-14.805-4.752-18.894.384-2.041 1.039-4.558 2.526-7.33-2.881-1.035-5.218-3.424-6.041-6.612-1.324-5.122 1.756-10.347 6.877-11.67.802-.207 1.607-.306 2.399-.306 4.097 0 7.844 2.654 9.119 6.698 5.236-2.473 11.057-3.05 15.518-3.05 1.264 0 2.419.047 3.42.109 0 0 .169.006.449.024.281-4.587 3.828-8.437 8.55-8.934.34-.035.678-.053 1.013-.053"
    fill="#F00" stroke="#000" />
</svg>

I really look forward to your answers, thank you!

Answer 1

As I mentioned elsewhere. You can split on M. If for some reason this doesn't make sense (as you mentioned multiple 'm's) as you say "behind m", then you need to amend your question to be more precise about where the split would be, if this is part of a more generic issue.

So we can split the string on "m"

var match = new RegExp("(^[^m]*)(.*)", "").exec(path);

And get the last point of the first path part...

var point = Raphael.getPointAtLength(match[1], p.getTotalLength(match[1]));

Then add the final point to the first path...

var p2 = r.path("M" + point.x + "," + point.y + match[2]).attr('stroke','blue')

And I've amended getPoints()...

function getPoints(path) {
    let points = [];
    let step_point = 10;
    for (let i = 0; i < path.getTotalLength(); i += step_point) {
        const point = path.getPointAtLength(i);
        points.push(point);
    }
    return points;
}

And get the sets of points...

console.log(getPoints(p1));
console.log(getPoints(p2));

jsfiddle showing different colours for outer/inner and it dumps in the console the two sets of points.