Jump to content
Search Community

Screen Coordinates in Scaled Container

swampthang test
Moderator Tag

Recommended Posts

I'm trying to figure out how to calculate the x position for a g element that would animate in from just "Off-Stage" (right, left, top, bottom) in an embedded SVG that is inside a div container which is scaled. When you change the container's scale setting (zoom) everything changes. 

 

Also, the original SVG was 640 x 640 but I resized it to 186 x 186 in this example which adds to the confusion for my feeble noggin. The reason for all these differences is a user can zoom the stage container in and out as well as resize the embedded SVG so I need to accommodate those changes.

 

Anyone have any idea how to get this to work?

See the Pen qBZrRGO?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Hey swampthang. I'm not sure exactly what your goal is based on your code, but this is definitely a situation where you want to use MotionPathPlugin's capabilities. .getRelativePosition(), .getGlobalPosition(), .convertCoordinates(), and .getAlignMatrix()  make this sort of thing much easier. You likely won't need all of them but I'm not sure of your goal so it's hard to help more tangibly at the moment.

  • Like 1
Link to comment
Share on other sites

Thanks for the reply, @ZachSaucier. I'm trying to animate the g element from just outside the stage area on the right (the dashed lines) to its current position. Then animate it to just outside the stage area on the left. In my app, I'm stuck (at this time anyway) with < version 3 so can't really leverage those methods.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...