svg - 动画 SVG其起点/终点位于元素

Question

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="jumpSequence" viewBox="200 -200 2900 1500" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g id="keypointPaths">
        <path d="M2798 572 L2790 571 L2788 592 L2720 581 L2619 600 L2582 586 L2461 608 L2394 604 L2256 570 L2188 603 L2074 597 L2025 596 L1949 575 L1723 613 L1575 584 L1469 585 L1385 640 L1202 635 L1079 638 L1035 602 L931 444 L973 289 L841 239 L900 198 L883 193 L820 178 L811 203 L766 242 L696 324 L677 384 L668 464 L670 691 L597 785 L582 774 L496 653 L504 595 L549 563 L531 533 L472 543 L453 558 L468 541 " stroke="hsl(220, 100%, 50%)" stroke-width="2" fill="none"></path>
        <path d="M2696 594 L2682 595 L2654 600 L2614 596 L2527 608 L2472 602 L2370 613 L2290 602 L2161 614 L2102 618 L1971 609 L1931 585 L1822 612 L1718 612 L1603 585 L1517 580 L1413 667 L1239 629 L1186 630 L1096 611 L996 482 L1007 350 L944 213 L987 206 L971 165 L881 150 L818 187 L846 209 L777 292 L642 394 L585 493 L593 698 L512 826 L486 783 L401 676 L413 626 L430 597 L417 574 L366 594 L368 586 L367 564 " stroke="hsl(135, 100%, 50%)" stroke-width="2" fill="none"></path>
    </g>
    <line x1="0" y1="100" x2="100" y2="100" stroke="hsl(200, 100%, 50%)"></line>
</svg>

我不知道如何将线 x1/y1 设置为在第一条路径上，将 x2/y2 设置在第二条路径上。

• 两个路径元素确实具有相同数量的点
• 无论距离多远，这条线都应该同时到达关键点。
• javascript 方法（更新行属性）不是我想要的。
• 搜索例如“svg 动画线路径”给了我绘图效果，而不是我正在寻找的。

并且可以在路径上为圆圈设置动画<animateMotion>，<mpath>但是如何使用路径作为行的开始/结束？

标签： svg