SVG.js - 如何移动和旋转元素以跟随路径，以便元素始终保持标题答案

【问题标题】：SVG.js - how do I move and rotate an element to follow the path so that the element always maintain a headingSVG.js - 如何移动和旋转元素以跟随路径，以便元素始终保持标题
【发布时间】：2018-01-16 18:12:31
【问题描述】：

我正在使用 SVG.js 和 jquery 开发一个简单的游艇比赛 SVG 动画来模拟游艇比赛。我可以轻松地为路径上的图像 [游艇图标] 设置动画。但我也希望游艇在沿着路径/路线行驶时旋转或改变游艇航向。我尝试过查看事物，但无法使其正常工作。请帮忙！

我正在使用此代码..

function move_yacht_new(route,yacht,score){
        var route1 = draw.path('M 535.07931,510.0164 C 594.9314,509.34072 667.14382,469.54596 691.80372,382.84271');
        route1.fill('none');
        var length = route1.length();
        var y_pos = score;
        var sailAngle = 90;
        var currentRotation;
        route1.hide();

        var text = draw.text(function(add) {
          add.tspan('We go ')
          add.tspan('up').fill('#f09').dy(-40)
          add.tspan(', then we go down, then up again').dy(40)
        })

        var image = draw.image('../globals/game/images/' + yacht + '-yacht.png',20, 20).id('yacht_' + yacht);       


        var scorePerc = (length/100) * (score);
         //vdiscountPerc = calcPerc.toFixed();

        var text = draw.text(yacht + ' (' + Math.round(score) + ')');


        image.animate(5000, '<>').during(function(pos, morph, eased){
            var p = route1.pointAt(eased * scorePerc);
            image.move(p.x, p.y);

            text.move(p.x, p.y).font({ fill: '#fff',  size: 5, family: 'Helvetica', leading:  '1.5em'  });
            var coord = image.bbox();
            var center = coord.x + (coord.width/2) + ' '+ coord.y + (coord.height/2);
            console.log('center ' + center);

            var x_coord = image.attr('x');
            var y_coord = image.attr('y');
            //console.log(x_coord + ',' + y_coord);
            image.rotate(-45, coord.x + (coord.width/2), coord.y + (coord.height/2));

            var angle = Math.atan2(p.y, p.x) * 180 / Math.PI;//angle for tangent

            //Shifting center to center of rocket
            var centerX = p.x - 24,
            centerY = p.y - 12;
            console.log('angle > ' + angle);


        //}).loop(true, true)
        })


    }

块引用

但这会将图标从路径中旋转到错误的方向。

【问题讨论】：

我认为我应该使用的术语是 MotionPath,,,

标签： rotation svg.js

【解决方案1】：

我设法使用 animation.js 脚本解决了这个问题。

【讨论】：

【解决方案2】：

将游艇图标添加到群组中，沿路径平移群组并围绕群组原点旋转群组中的游艇图标：

var g = draw.group()
var yacht = g.image(yachtUrl, width, height).center(0,0)

// in animate function:
g.transform(x: x, y: y)
yacht.transform(rotation: degrees, cx: 0, cy: 0)

【讨论】：