Question

我正在尝试使用Snap.svg跟随旋转的椭圆路径，但我遇到了问题。

使用getPointAtLength仅返回未旋转的路径的点，因此当我旋转路径时，圆圈仍将沿着原始路径旋转。

var firstOrbit = s.path("M250,400a150,75 0 1,0 300,0a150,75 0 1,0 -300,0")
.attr({stroke: "#000", strokeWidth:"5", fill: "transparent"});
var len = firstOrbit.getTotalLength();
firstOrbit = firstOrbit.transform('r75,400,400');
var circleA = s.circle(0,0,10);
var startingPointA = Snap.path.getPointAtLength(firstOrbit, 0);
Snap.animate(0, len, function(value){
    var movePoint = firstOrbit.getPointAtLength(value);
    circleA.attr({ cx: movePoint.x, cy: movePoint.y });
}, 2000, mina.linear);

问题是，椭圆旋转，但是circleA遵循的路径没有，因此它遵循错误的路径。有没有一种简单的方法可以解决这个问题，还是我必须计算动画每一步的差异？

Answer 1

此问题有两种可能的解决方案。您必须将<path>和<circle>放在<g>组中并将变换应用于组或在路径上找到实际点，然后通过应用变换矩阵找到变换后的点。

解决方案1 

var len = firstOrbit.getTotalLength();
var circleA = s.circle(0,0,10);

var group = s.g(firstOrbit,circleA);
group = group.transform('r75,400,400');

JSFiddle

解决方案2

var pt = s.node.createSVGPoint();
Snap.animate(0, len, function(value){
    var movePoint = firstOrbit.getPointAtLength(value);
    pt.x = movePoint.x; 
    pt.y = movePoint.y;
    movePoint = pt.matrixTransform(firstOrbit.node.getCTM());   
    circleA.attr({ cx: movePoint.x, cy: movePoint.y });
}, 2000, mina.linear);

JSFiddle

Answer 2

将圆圈和路径放在一个组中。将变换/旋转应用于组（而不是路径），以便圆和路径都继承相同的变换。

SVG - 跟随旋转路径

2 个答案: