I am trying to create animation paths to animate the elements of an svg image along paths using some javascript library.

The various objects in the image will have to follow paths, but the animation library aligns the object's center point to the path.

I have made the paths, but I can't find a way to align their to the objects center. The main problem is that the objects must be exactly adjacent because they are slices of a bigger illustration.

So my question is how can I turn the center point of one object into an actual point.

  • You can not. There is also no such thing as centre, there are several things that can be considered centre. It is probably usinng either coordinate 0,0 or bounding box center. Neither of which are good candidates for center of object.
    – joojaa
    Feb 15 at 15:59
  • The js library is green sock fwiw
    – beppe9000
    Feb 17 at 16:24

Disclaimer: I don't know how useful this will be for your particular use case.

However, it is possible to add a single point to a shape in Inkscape at an object's midpoint/rotation centre. You could then potentially group both shape and that point, and use that point as the animation centre.

But, I'm not sure how practical this would be to use with your particular javascript library. I suppose it would depend if it can animate a group, but with respect to just one path within that group? If so, it might be a usable hack.

Here's an example, and how I would achieve it in Inkscape.

  1. Draw a regular polygon or any shape, and switch on Snapping, and Snap Centres of objects. The center of a polygon will be the object centre in Inkscape, if you have a normal path, you can click a shape twice to enable the rotation handles and drag the rotation centre to anywhere you desire.

  2. Draw a short straight line from that center

enter image description here

  1. Open up the XML editor, delete the last two numbers of the path, then press enter to confirm. Perhaps rename the path ID to "center" so you easily reference it.

enter image description here

  1. Now you have a point - an invisible path with only one node, called "center"

  2. Open up the Objects panel, select both paths and group.

enter image description here

Here's the SVG if you want to try playing with it

<?xml version="1.0" encoding="UTF-8"?>
<svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(59.3 -5.86)" fill="none" stroke="#000" stroke-width=".5">
<path d="m-22.6 45.8c-1.89.97-9.84-8.64-11.6-9.79-1.79-1.16-13.8-4.45-13.7-6.58s12.4-4.2 14.3-5.17c1.89-.97 10.8-9.73 12.5-8.58 1.79 1.16-2.56 12.8-2.67 15-.107 2.13 3.05 14.2 1.16 15.2z"/>
<path id="center" d="m90.4 42.4"/>
  • This pretty much solves my problem which was about aligning the start/end of the animation paths to the center of objects. Thank you!
    – beppe9000
    Feb 17 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.