我如何仅从左侧减小此 SVG 的宽度，其他应保持静态

Question

我正在尝试使用 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>

Answer 1

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

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

<button onclick="myFunction(0.7)">Pos 1</button>
<button onclick="myFunction(0.2)">Pos 2</button>
<button onclick="myFunction(-1.1)">Pos 3</button>
<button onclick="myFunction(-1.5)">Pos 4</button>

您所要做的就是跟踪之前的 scaleX 并将其用作 fromTo

中的下一个“来源”

我如何仅从左侧减小此 SVG 的宽度，其他应保持静态

how I can reduce the width of this SVG from only left side other should stay static

html

javascript

css

css-animations

gsap