SVG - 跟随旋转路径答案

【问题标题】：SVG - Follow rotated pathSVG - 跟随旋转路径
【发布时间】：2015-02-26 03:56:09
【问题描述】：

我正在尝试使用 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 所遵循的路径没有旋转，因此它遵循错误的路径。有没有简单的方法来解决这个问题，还是我必须计算动画每一步的差异？

【问题讨论】：

标签： javascript svg rotation snap.svg

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：