CODEWITHSUNDEEP
javascriptanimationsvgpathsnap.svg
Micha
Micha

Reputation: 563

snap.svg moving object in a circle

I simply want to move a loaded SVG in a circle. Here is what i got so far, the idea being: "leave the object where it is, rotate it in a circle with a radius of 30":

var svgObject = Snap("svg#object g");
var path = svgObject.path("M0 0 a60 60 0 0 0 30 30");
var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);
   svgObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);

I realize the code above must be relatively naive, but this is what I gathered from various sources on the internet.

All the above code does is move the object to the right. I want it to do a complete circle (ending exactly where it started).

What would I have to change to make the code above work as described?

Upvotes: 1

Views: 1800

Answers (1)

Ian
Ian

Reputation: 13842

Its always a lot easier if you include the full code and markup. Chances are you are trying to transform the main svg object (as I can see the code has been edited) and not transforming the g object. Also your path to animate along isn't right. As the markup isn't displayed, I can't test that, but here's a working example.

Just amend the circle path so it contains only the section you need. 

var svgObject = Snap("#svgobject");
var groupObject = Snap('#svgobject g');

var path = svgObject.path("M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0").attr({ fill: 'none' });


var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);  
    
    groupObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

<svg id="svgobject" height="800" width="800">
    <g>
    <rect x="50" y="50" width="50" height="50"/>
    </g>
</svg>

Upvotes: 2

Related Questions