分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了动画 SVG <line> 的起点/终点在 <path> 元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决动画 SVG <line> 的起点/终点在 <path> 元素？

开发过程中遇到动画 SVG <line> 的起点/终点在 <path> 元素的问题如何解决？下面主要结合日常开发的经验，给出你关于动画 SVG <line> 的起点/终点在 <path> 元素的解决方法建议，希望对你解决动画 SVG <line> 的起点/终点在 <path> 元素有所启发或帮助；

<?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,50%)" stroke-wIDth="2" fill="none"></path>
    </g>
    <line x1="0" y1="100" x2="100" y2="100" stroke="hsl(200,50%)"></line>
</svg>