svgdotjs / svg.js

The lightweight library for manipulating and animating SVG

Home Page:https://svgjs.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rotating a polygon inside a group affects position of sibling circle of the group

alexNecroJack opened this issue · comments

Fiddle

https://jsfiddle.net/1b578zjg/

Explanation

  • What is the behavior you expect?
    I expect a circle starting at 60, 60, with r=60,
    and a polygon rotated (triangle) wherever it may land

  • What is happening instead?
    The polygon rotated, but the circle, even if added after or before the polygon and it's rotation, gets shifted downwards by 10px,
    ending up at 60, 70, with r=60 ...

In the fiddle, if you enable the line before the last one, the bag disappears.
This happens either by removing the "rotate" which is on the polygon,
or by removing the "move(0,0)" which is on the parent group.
Note here, that rotate should have nothing to do with it.
Polygon belongs to a subgroup, while the circle being affected belongs
to the parent group of the group which actually has the polygon.

Groups dont have a dimension on their own. They are as big as their content. If you rotate the polygon, you are changing the dimension of the group.The rototated polygon takes up more space so that its outer edge is higher than the circles border.

Calling move(0,0) is moving the group so that its bounding box (the dimension inherited by its children) will be a 0,0.
So this code is working exactly as expected