I have successfully gotten a rectangle to move along a path but have not been able to have it rotate and scale while staying on the path. The moment i specify the rotate and scale attributes it wonders off the path. Here included are the relevant jsfiddle links of my examples ...
working js fiddle with translate
not working js fiddle with path
The actual html for the 2 pages are as follows :
<html>
<head>
<title>SVG.js</title>
<style>
html, body, #drawing{
width:100%;
height:100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
</head>
<body onload="onload();">
<div id="drawing"></div>
<script>
function onload() {
var timeline = new SVG.Timeline();
var draw = SVG().addTo('#drawing').size(800, 800);
var rect = draw.rect(50, 50).attr({fill: '#f06', id :'rect'});
var line = draw.line(0, 0, 150, 150).stroke({width:2,color:'#ccc'});
SVG('#rect').timeline(timeline).animate(5000,100,'absolute').rotate(45).animate(5000,100,'absolute').scale(0.4).animate(5000,100,'absolute').translate(150,150);
}
</script>
</body>
and
<html>
<head>
<title>SVG.js</title>
<style>
html, body, #drawing{
width:100%;
height:100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
</head>
<body onload="onload();">
<div id="drawing"></div>
<script>
function onload() {
var draw = SVG().addTo('#drawing').size(800, 800);
var rect = draw.rect(50, 50).attr({fill: '#f06'});
var path = draw.path("m 357.64532,453.84097 c 17.62007,8.02216 -2.12058,27.70935 -13.33334,29.28571 -30.3859,4.27185 -48.34602,-29.97426 -45.23807,-55.9524 5.5594,-46.46879 56.1311,-70.59787 98.57145,-61.19043 62.28294,13.8058 93.32728,82.57702 77.1428,141.19051 C 453.21679,585.29693 365.67122,623.42358 290.97859,600.26951 196.98554,571.13248 151.71003,464.56996 181.93108,373.84089 218.53281,263.95583 344.23687,211.49702 450.97875,248.84102 576.77037,292.84963 636.43303,437.76771 591.93099,560.50775 540.55162,702.21597 376.3736,769.09583 237.6452,717.41234 80.01319,658.68628 5.9069261,475.21736 64.788247,320.50751 130.84419,146.94643 333.62587,65.607117 504.31214,131.69819 693.80625,205.0718 782.38357,427.18225 709.07382,613.84113");
var length = path.length();
path.fill('none').stroke({width: 1, color: '#ccc'});
rect.animate(5000,1000).ease('<>').during(function(eased){
var p = path.pointAt(eased * length);
rect.center(p.x, p.y);
}).animate(5000,100,'absolute').rotate(45).animate(5000,100,'absolute').scale(0.5);
}
</script>
</body>
The help docs are not very helpful so i am asking here. Thanks