Example: http://codepen.io/heroheman/pen/thdBH
Hi, i have this boxed path, which changes the it corner points every second.. Also i have 4 icons which should be on the corner of the box. Both is based on an array which recalculates the points, and sets new position. But the position of the circles seems to have some kind of scaling - I tried absolute and relative paths (t and T seems to make no difference).
Maybe one of you guys could help!
You will need to account for the offset of the centre of the circles...
If you look at 'bubble' for example, its cx,rx attribute is 113,101.6
So ideally the transform for bubbles would logically be (new transform - original position)
't' + ( boxCoords[4] - 113 ) + ',' + (boxCoords[5] - 101.6 )
You could either hard code this in an array or object. Or if there are lots of icons, possibly you could grab the icons respective circle element, and get its element.attr('cx') value (or x if its a rect, or previous transform if its an arbitrary shape, or do a getBBox() on it to get its centre).