代码
提交代码
<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>
运行结果