Нахождение средней точки в пути SVG

Question

У меня в настоящее время есть путь, который является частью группы.Я использую Jquery, чтобы найти конкретный путь, и я хотел бы найти середину этого пути.Я нашел этот пример здесь , но когда я нахожу свой путь или точки и пытаюсь использовать .getTotalLength(); или .getPointAtLength(), я получаю ошибку в консоли с надписью Uncaught TypeError: $(...).children(...).getTotalLength is not a function или Uncaught TypeError: $(...).children(...)..getPointAtLength() is not a function.

Я прочитал кое-что, что эти функции являются частью SVGGeometryElement вместо SVGPathElement, но я не уверен точно, что это значит или как использовать функцию сейчас.Любая помощь будет принята с благодарностью.

код пути

<g class="path-line" data-line_id="1"><path stroke-width="5" fill="none" d="M1582.0000915527344,610.0000305175781 C1682.0000915527344,610.0000305175781 1610.0000610351562,710.0000305175781 1711.0000610351562,710.0000305175781" stroke="#000000"></path><rect stroke="none" mask="url(#fc_mask_0_1)" x="1710.0000610351562" y="707.5000305175781" width="21" height="5" fill="#000000"></rect></g>

javascript

    this.objs.lines.on('mouseover', '.line-class', function (e) {
        var len = $(this).children('path').getTotalLength();
        console.log(len);

    });

Answer 1

Вы должны использовать $(this).children('path')[0].getTotalLength();

$(".path-line").on('mouseover', function (e) {var len = $(this).children('path')[0].getTotalLength();
     console.log(len);
    });

svg{border:1px solid; max-width:100vh;}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<svg viewBox="1580 605 155 110">
  <g class="path-line" data-line_id="1">
  <path stroke-width="5" fill="none" d="M1582.0000915527344,610.0000305175781 C1682.0000915527344,610.0000305175781 1610.0000610351562,710.0000305175781 1711.0000610351562,710.0000305175781" stroke="#000000"></path>
    
    <rect stroke="none"  x="1710.0000610351562" y="707.5000305175781" width="21" height="5" fill="#f00"></rect></g>
  
<circle id="c" r="5" fill="gold" />
<svg>

Answer 2

вы можете 1-

$(this).children('path').attr('d')

разбить строку пути с пробелом на массив, затем создать массив объектов, таких как

[{x:"",y:""}], затем вы можете получить доступ к точкам

2 - получить положение и размер объекта, затем вычислить среднюю точку