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

голоса
0

Я в настоящее время есть путь , который является частью группы. Я использую 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);

    });
Задан 20/10/2018 в 05:14
источник пользователем
На других языках...                            


2 ответов

голоса
2

Вы должны использовать $(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>

Ответил 20/10/2018 в 06:52
источник пользователем

голоса
-1

Вы можете 1-

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

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

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

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

Ответил 20/10/2018 в 05:24
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more