Question

我目前有一个属于群组的路径。我正在使用Jquery查找特定路径，并且我想查找该路径的中点。我找到了这个示例on here，但是当我找到路径或点并尝试使用.getTotalLength();或.getPointAtLength()时，控制台中显示错误Uncaught TypeError: $(...).children(...).getTotalLength is not a function或{ {1}}。

我读到一些内容，这些功能是Uncaught TypeError: $(...).children(...)..getPointAtLength() is not a function而不是SVGGeometryElement的一部分，但是我不确定现在到底是什么意思或如何使用该功能。任何帮助将不胜感激。

路径代码

SVGPathElement

javascript

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

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- 获取对象的位置和大小然后计算中点

在SVG路径中找到中点

2 个答案: