Why does this snap.svg rotation animation work in JSFiddle but not locally?

39 Views Asked by At

This rotation animation works fine in this JSFiddle example, but when I try it locally, it won't animate. If I change the animation from a 360 degree rotation to a 180 degree rotation, it works, sort of, but then it does a strange compound translation and rotation. It's not like the center of rotation is just in the wrong spot. I'm using the same CDN as in the animation. Others have had the same problem, but their problems were not solved.

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();
<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>

0

There are 0 best solutions below