SVG-遵循旋转路径 [英] SVG - Follow rotated path

问题描述

我正在尝试使用Snap.svg使圆沿着椭圆形路径旋转，但是遇到了问题.

I'm trying to have a circle follow an elliptical path that is rotated, using Snap.svg, but I've ran into a problem.

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

Using the getPointAtLength only returns the point of the path that is not rotated, so when I rotate the path, the circle will still follow the original path, before rotation.

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遵循的路径没有旋转，因此它遵循了错误的路径.有没有简单的方法可以解决此问题，还是我必须在动画的每个步骤中计算出差异?

The problem is, that the ellipse rotates, but the path that circleA follows does not, so it follows a wrong path. Is there an easy way to fix this, or do I have to calculate the difference at each step of the animation?

推荐答案

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

You have two possible solutions for this issue. Either you will have to put the <path> and <circle> inside a <g> group and apply transformations to the group Or find actual point on path and then find the transformed point by applying the transformation matrix.

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

这篇关于SVG-遵循旋转路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！