Snap.svg旋转动画在JSFiddle正常，本地运行却失效？

问题情况 #

• 360度旋转动画在在线环境正常，本地无法触发；
• 修改为180度旋转后，出现异常的平移+旋转复合效果，排除旋转中心设置错误；
• 已使用与在线示例一致的CDN资源加载Snap.svg；
• 同类问题已有开发者反馈，但未得到解决。

复现代码 #

JavaScript代码 #

var s = Snap("#svg");

var c = s.circle(100,100,100).attr({ stroke: 'red', strokeDasharray: "40 280", fill: 'none', strokeWidth: 20 });

function anim() {
    c.transform('r0,100,100');
    c.animate({ transform: "r360,100,100" }, 1000, mina.linear, anim);
};

anim();

HTML代码 #

<body>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" height="800"></svg>

<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
</body>

解决办法 #

1. 用微小角度替代360度 #

Snap.svg的动画引擎会判定360度和0度为相同状态，直接跳过动画。改成359.9度就能绕过这个判定，视觉上完全看不出差异：

function anim() {
    c.transform('r0,100,100');
    c.animate({ transform: "r359.9,100,100" }, 1000, mina.linear, anim);
};

2. 手动计算旋转矩阵实现动画 #

绕开Snap.svg的transform解析bug，直接用矩阵计算控制旋转，兼容性更可靠：

var s = Snap("#svg");
var c = s.circle(100,100,100).attr({ stroke: 'red', strokeDasharray: "40 280", fill: 'none', strokeWidth: 20 });
const center = { x: 100, y: 100 };

function runAnim(currentAngle = 0) {
    // 角度转弧度
    const rad = currentAngle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);
    // 生成绕中心旋转的变换矩阵
    const rotateMatrix = new Snap.Matrix(
        cos, sin, -sin, cos,
        center.x - cos * center.x + sin * center.y,
        center.y - cos * center.y - sin * center.x
    );
    c.transform(rotateMatrix);

    // 循环执行动画，每帧转3.6度（1000ms转一圈）
    if (currentAngle >= 360) {
        runAnim(0);
    } else {
        requestAnimationFrame(() => runAnim(currentAngle + 3.6));
    }
}

runAnim();

3. 升级Snap.svg版本 #

原代码使用的0.1.0版本存在transform动画的已知bug，升级到最新稳定版（比如0.5.1）就能解决大部分问题：

<!-- 替换原有脚本引用 -->
<script src="https://cdn.jsdelivr.net/npm/snap.svg@0.5.1/dist/snap.svg-min.js"></script>

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