我试图通过gsap控制svg从右向左移动。它的工作很好，但当我想动画它的极端左侧，但下降线应保持在同一位置。另一侧应保持在同一位置。我想要的第二件事是从当前位置开始（例如，单击第二个按钮，然后如果单击另一个按钮，它应该从第二个按钮的位置开始），当前，它从最左边开始。任何帮助都将不胜感激。

function myFunction() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX: 0.7, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}

function myFunction1() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX: 0.2, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}

function myFunction2() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX:- 1.1, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}

function myFunction3() {
    var tl = new TimelineMax();
    tl.fromTo('.box', 2,{scaleX: 1}, {scaleX: -1.5, transformOrigin: '100% 90%'});
    gsap.set('.box',{ strokeDasharray: '4'});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<div width="100%">

<svg xmlns="http://www.w3.org/2000/svg" width="544" height="190" viewBox="0 0 544 190" fill="none">
    <path class="box" d="M2 0V65.3452C2 78.6001 12.7452 89.3452 26 89.3452H518C531.255 89.3452 542 100.09 542 113.345V190" stroke="#FBDF4B" stroke-width="4" stroke-dasharray="8 8"/>
</svg>

</div>

<button onclick="myFunction()">Pos 1</button>
<button onclick="myFunction1()">Pos 2</button>
<button onclick="myFunction2()">Pos 3</button>
<button onclick="myFunction3()">Pos 4</button>