javascript - 查找 SVG 路径中的中点

Question

我目前有一条路径属于某个组。我正在使用 Jquery 来查找特定路径，我想找到该路径的中点。我找到了这个例子on here但是当我找到我的路径或点并尝试使用 .getTotalLength(); 或 .getPointAtLength() 时，我在控制台中出现错误，显示 未捕获的类型错误:$(...).children(...).getTotalLength 不是函数 或未捕获的类型错误:$(...).children(...)..getPointAtLength( ) 不是函数。

我读到一些内容，这些函数是 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>