Zoom not working as it should is case of its transform origin

[Owais1723]

Hola, I am implementing zoom in and out functionality in svg using wheel eventListener in js. How ever the zoom in and out works fine. But the transform origin of the svg g is at 50 % and 50% so it zoom's in only towrads those points, even when the center 50%, 50% is not in view, I've tried it using the methode of finding the transform origin for the box that is in view then using that tranform origin it zoom in and out but i failed because the values in console were of the start transform origin of box g when it was rendered. I know their is some cleaner way to implement this since am newie don't know much tricks. It will be really appreciated if some one can help me out it this. I have provided the codepen. Thanks 🙂

See the Pen poQyVoe by Owais-Ahmad (@Owais-Ahmad) on CodePen

[GreenSock]

Are you saying you want it to scale from transformOrigin: 50% 50% of the svgBox no matter where it is dragged? Like this?: 

See the Pen rNQereL?editors=0010 by GreenSock (@GreenSock) on CodePen

[Owais1723]

54 minutes ago, GreenSock said:

Are you saying you want it to scale from transformOrigin: 50% 50% of the svgBox no matter where it is dragged? Like this?: 

 

 

No no, not like that what you have is already implemented in my codepen, But i want it work like any normal zoom, so it should zoom on the part which is in view, Currently if you zoom in and the center point is not in view you'll see that it zoom in on that center point which 50%, 50% where i should have zoomed on the box which is in view.

 

Thank you for helping me out as always❤️

here is a refernce of zoom i wanted it to be like that: https://pavellaptev.github.io/warp-svg/

[Rodrigo]

Hi,

 

Maybe this article by @PointC can provide some good insights regarding this:

https://www.motiontricks.com/basic-svg-viewbox-animation/

 

Also professor @Carl has a lesson about this as well:

Hopefully this helps.

Happy Tweening!

[Owais1723]

@Rodrigo Thank you for sharing these knowledgeable links❤ They really helped me 

[Owais1723]

@GreenSock Hello Greensock I have tried a lot like using different equations but haven't been successful. I have updated codepen if you look thier will be a black dot in center that is where i want to zoom in and out on that black dot (dot as reference for zooming so that you can understand).
so far i have used:
1: ( gBottom - gTop ) / 2 -> for translate y (gRight - gLeft) / 2 -> for translate x (g = g svg element on which i am using x, y, scale for zooming )

2: (gWidth - svgWidth) + gLeft -> for translate x (gHeight - svgHeight) + gTop -> for translate y

i am getting these values using getboudlcientrect()

[GreenSock]

This is well beyond the help we can provide for free in these forums unfortunately. It requires a fair amount of custom logic to work it all out, so you're welcome to contact us if you'd like to engage our paid consulting services. 

 

However, maybe a simple solution is to just scale the <svg> container instead. So you can drag the stuff inside of the SVG wherever you want, but the <svg> itself remains centered in the viewport and you just scale that up and down. Sorta like: 

See the Pen ZEmBKqM?editors=1010 by GreenSock (@GreenSock) on CodePen

[Owais1723]

2 hours ago, GreenSock said:

This is well beyond the help we can provide for free in these forums unfortunately. It requires a fair amount of custom logic to work it all out, so you're welcome to contact us if you'd like to engage our paid consulting services. 

 

However, maybe a simple solution is to just scale the <svg> container instead. So you can drag the stuff inside of the SVG wherever you want, but the <svg> itself remains centered in the viewport and you just scale that up and down. Sorta like: 

 

 

Yeah sure where can i contact you for this paid consulting

 

[GreenSock]

17 minutes ago, Owais1723 said:

Yeah sure where can i contact you for this paid consulting

 

I sent you a private message with details. 

 

Are you not happy with the solution provided where you zoom the whole <svg>? Just checking. 

[Owais1723]

53 minutes ago, GreenSock said:

I sent you a private message with details. 

 

Are you not happy with the solution provided where you zoom the whole <svg>? Just checking. 

Yeah, for now, I can use this solution, Currenlty I am working on two other functionalities once I complete those then I have to go for the paid because I want it to be like that. And want to say thank you because you've helped me a lot like can't tell and if you want to see the project I can show it to you 😃. Once Thanks a lot