SVG.js 矩形沿路径移动时旋转缩放失效问题求助

问题核心在于变换顺序和动画逻辑的分离：

• 单独的rotate/scale动画会基于矩形当前的局部坐标系执行，而非路径上的目标点
• 分开的animate调用会中断路径跟随逻辑，导致后续动画不再维持路径位置

方案1：合并所有动画到同一回调（同步执行移动、旋转、缩放） #

将路径定位、旋转、缩放逻辑放在同一个during回调中，确保每一帧都先定位到路径点，再以矩形中心为基准应用变换：

<html>
<head>
    <title>SVG.js</title>
    <style>
        html, body, #drawing{
            width:100%;
            height:100%;
        }      
    </style>
    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body onload="onload();">
    <div id="drawing"></div>
    <script>
        function onload() {
            var draw = SVG().addTo('#drawing').size(800, 800);
            var rect = draw.rect(50, 50).attr({fill: '#f06'});
            var path = draw.path("m 357.64532,453.84097 c 17.62007,8.02216 -2.12058,27.70935 -13.33334,29.28571 -30.3859,4.27185 -48.34602,-29.97426 -45.23807,-55.9524 5.5594,-46.46879 56.1311,-70.59787 98.57145,-61.19043 62.28294,13.8058 93.32728,82.57702 77.1428,141.19051 C 453.21679,585.29693 365.67122,623.42358 290.97859,600.26951 196.98554,571.13248 151.71003,464.56996 181.93108,373.84089 218.53281,263.95583 344.23687,211.49702 450.97875,248.84102 576.77037,292.84963 636.43303,437.76771 591.93099,560.50775 540.55162,702.21597 376.3736,769.09583 237.6452,717.41234 80.01319,658.68628 5.9069261,475.21736 64.788247,320.50751 130.84419,146.94643 333.62587,65.607117 504.31214,131.69819 693.80625,205.0718 782.38357,427.18225 709.07382,613.84113");
            var length = path.length();
            path.fill('none').stroke({width: 1, color: '#ccc'});

            // 合并移动、旋转、缩放为一个动画
            rect.animate(15000, 1000).ease('<>').during(function(eased){
                var p = path.pointAt(eased * length);
                // 按进度动态计算旋转角度（0→45°）和缩放比例（1→0.5）
                var rotateAngle = eased * 45;
                var scaleRatio = 1 - (eased * 0.5);
                
                // 组合变换：先平移到路径点，再以中心为基准旋转、缩放
                rect.transform({
                    translate: [p.x, p.y],
                    rotate: rotateAngle,
                    scale: scaleRatio,
                    origin: 'center'
                });
            });
        }
    </script>
</body>
</html>

方案2：分步执行动画（先移动，再旋转，最后缩放） #

如果需要分阶段执行动画，每个阶段都要重新设置路径位置，确保变换基于路径点：

// 先沿路径移动
rect.animate(5000, 1000).ease('<>').during(function(eased){
    var p = path.pointAt(eased * length);
    rect.center(p.x, p.y);
})
// 固定在路径终点，执行旋转动画
.animate(5000, 100).during(function(eased){
    var p = path.pointAt(length);
    rect.transform({
        translate: [p.x, p.y],
        rotate: eased * 45,
        origin: 'center'
    })
})
// 保持路径终点和旋转状态，执行缩放动画
.animate(5000, 100).during(function(eased){
    var p = path.pointAt(length);
    rect.transform({
        translate: [p.x, p.y],
        rotate: 45,
        scale: 1 - (eased * 0.5),
        origin: 'center'
    })
});

关键注意点 #

• 变换顺序：始终先执行translate定位到路径点，再执行rotate/scale，避免变换基准偏移
• 基准点设置：通过origin: 'center'确保旋转和缩放以矩形中心为基准，防止位移
• 动画连续性：所有涉及路径位置的动画阶段，都要在during回调中重新计算路径点，维持位置

内容的提问来源于stack exchange，提问作者starrezzy