代码
提交代码
<script src="https://wiki-code.oss-cn-beijing.aliyuncs.com/html5/js/snap.svg-min.js"></script>
<svg id="demo1" width="1000" height="1000"></svg>
<script>
let svg = Snap('#demo1');
let circle = svg.select('.circle'); //如果SVG中已有实际图形元素,直接选择器初始化
// 1S内矩形围绕矩形的中心旋转100次,完成旋转一周,动画效果是缓出
let rect = svg.paper.rect({x: 200, y: 200, width: 200, height: 200, fill: '#f00'});
Snap.animate(0, 100, (val) => {
let m = new Snap.Matrix();
m.rotate((val/100)*360, 300, 300); // 注意,旋转中心是矩形的中心
rect.transform(m); // 在rect节点应用matrix
}, 1000, mina.easeout(), () => {
});
</script>
运行结果