moving a group of centered use() elements from defs() **as one** does not work in 3.2 (but worked in 2.7)

[tdindorf]

Bug report

Moving a group containing

a. use() elements
b. that were centered

does not work in 3.2, though it worked in 2.7: see this fiddle

Explanation

• group b should look like group a when moved, which it did in 2.7 - now the elements lose alignment
• add(element.clone()) solves the problem (see group c), but that messes up code written for 2.7

P.S. why does SVG('x') (2.7) not work in (3.2), requiring SVG().addTo('x') instead? This also breaks old code.

Otherwise svg.js is a great tool!
Thanks

[Fuzzyma]

The reason we released v3 as new major was to be able to break things. That's what a major version bump means after all :).
We enabled to do a lot of cool things with that.

e.g. this all is possible now:

SVG('#someRect') // gets element with id rect
SVG('body > .any-selector.will-do') // querySelector power
SVG('<rect>') // creates a rect
// ...

Passing the id to SVG in order to create an svg in the element with that id was quite limiting. It also made it impossible to create an svg doc without attaching it to something right away.

Yes, this creates some work when updating from v2 to v3 but on the other hand nobody is forcing you to update :).

Back to your issue:

The way move works was streamlined in v3. Groups don't have x and y coordinates so in v2 we used a trick and translated the group instead (=transformation). However, that had tons of other implications. So in v3 instead of translating the group, we move every element in the group instead. I wrote tons of tests for that but I guess its not easy to catch all possible things because what you encountered is indeed a bug.

It is really strange because we just utilize bounding boxes in the move command and those seem to be correct.

As a workaround try using translate instead for now:

const box = group.bbox()
group.translate(cx - box.width / 2, cy - box.height / 2)