Jump to content
GreenSock

lisartur

Get element position X Y

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have element SVG

<path id="5" class="fil3" d="M20 75c13,23 32,42 55,55 23,-13 42,-32 55,-55 -13,-23 -32,-42 -55,-55 -23,13 -42,32 -55,55z"/>

 

And if i transform this object how get x, y position?

xy.png

 

Link to comment
Share on other sites

You can just ask for the top/left after the transform

 

See the Pen RMLEve by sgorneau (@sgorneau) on CodePen

 

If you're asking for the new position of a specific vertex after the square is rotated 90º, it would just be the original position on the axis it's moved across plus the length of the side in tow.

 

If asking for something more complicated, this SE post could help

 

https://math.stackexchange.com/questions/1917449/rotate-polygon-around-center-and-get-the-coordinates

  • Like 5
Link to comment
Share on other sites

Dealing with coordinates inside an SVG is complicated, especially if the SVG has a viewBox.

 

See the Pen 7385d228427bb3e2cafe3e55ba509fe9 by osublake (@osublake) on CodePen

 

 

I wrote this script to help get the transformed bounds of SVG elements. That's commonly known as an axis-aligned bounding box, or AABB.

 

See the Pen JMvVyo by osublake (@osublake) on CodePen

 

  • Like 8
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.
×