[Problem with Transition (Zoom) effect to SVG path element]

Kk, ty very much!

[Problem with Transition (Zoom) effect to SVG path element]

Thank you very much for your quick and helpful response,

Also thanks for CodePen tips,

I have already updated my previously provided CodePen (just cleared most of path elements, left only 2, and made changes from your example),

I guess my mistake was the missing of that transition properties,

At the moment trying to apply that changes to my main project,

I am just curious and have another question: How are you determining the "X" and "Y" values (in a result, scaled object should be in the center of bounding box)? 

[Problem with Transition (Zoom) effect to SVG path element]

Hello,

 

I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function.

I have decided to make zooming function via changing Transform's "scale" and "translate" properties.

 

Example is here: 

Just check JS lines, and for test click on red object.

 

I have used TweenMax library for transition change of up mentioned properties.

My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it.

Can anyone explain why it does this? and help me to fix?

I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675

Thanks in advance.

See the Pen oLRPjY by Creedplay (@Creedplay) on CodePen