CODEWITHSUNDEEP
javascriptsvgsnap.svg
Spellfork
Spellfork

Reputation: 13

Placing and rotating svg elements along a path with Snap.svg

I have been trying out snap.svg and I'm new to svg manipulation in javascript so bear with me :)

I have created a path that I'm placing other shapes along. The placing works fine but I'd like the shapes that I place to always point straight out, getting the angle of the object to align with whatever route the path takes. Think of this as placing text along a svg path, getting each character to bend with the path, facing outwards or inwards.

Any help would be great.

Upvotes: 1

Views: 877

Answers (1)

Ian
Ian

Reputation: 13842

If you use Snaps getPointAtLength() method (docs) you will find included in the return object is 'alpha'.

Alpha varies as the path does, so you can just set your element to rotate at the value of the returned alpha (you may need to offset it by 90 degrees or something).

So in totally untested code it would look something like...

 myPoint = myShape.getPointAtLength( lengthSoFarInPath ) 
 myShape.transform('t' + myPoint.x + ',' + myPoint.y + 'r' + myPoint.alpha)

Upvotes: 1

Related Questions