snap.svg 圆周移动物体

Question

我只想将加载的 SVG 移动一圈。这是我到目前为止得到的，想法是："leave the object where it is, rotate it in a circle with a radius of 30":

var svgObject = Snap("svg#object g");
var path = svgObject.path("M0 0 a60 60 0 0 0 30 30");
var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);
   svgObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);

我意识到上面的代码一定比较幼稚，但这是我从互联网上的各种来源收集的。

以上代码所做的只是将对象向右移动。我希望它做一个完整的圆圈（正好在它开始的地方结束）。

我需要更改什么才能使上面的代码按描述工作？

Answer 1

如果包含完整的代码和标记，它总是容易得多。您可能正在尝试转换主要的 svg 对象（正如我所看到的代码已被编辑）而不是转换 g 对象。此外，您的动画路径也不正确。由于未显示标记，我无法对其进行测试，但这是一个有效的示例。

只需修改圆形路径，使其只包含您需要的部分。

var svgObject = Snap("#svgobject");
var groupObject = Snap('#svgobject g');

var path = svgObject.path("M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0").attr({ fill: 'none' });


var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);  
    
    groupObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

<svg id="svgobject" height="800" width="800">
    <g>
    <rect x="50" y="50" width="50" height="50"/>
    </g>
</svg>

snap.svg 圆周移动物体

snap.svg moving object in a circle

javascript

animation

svg

path

snap.svg