Jump to content
Search Community

Move Element to Center of Another Element

kalaschnik test
Moderator Tag

Go to solution Solved by kalaschnik,

Recommended Posts

Hey all,

 

is there any dynamic way (instead of defining: `x/y: <coords>` to move an object to the center of another object?

 

Let’s say my `anchor` is not always fixed at the same spot. And my `ball` needs to dynamically read out the current target coords from the anchor. What is the best way to achieve that?

 

Thank you!

See the Pen zYJRvXP by Kalaschnik (@Kalaschnik) on CodePen

Link to comment
Share on other sites

Hi

 

In SVG certainly that's the way to achieve that.

 

For regular DOM elements you could use getBoundingClientRect:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

Also you can use other methods if your element is not in the viewport. So as you can see there are a few different avenues that can be explored to solve this.

 

Happy Tweening!

Link to comment
Share on other sites

Pretty much, but just keep in mind that the getBBox() thing reports coordinates within the parent <svg>'s coordinate system which is usually very different than the overall web page's coordinate system. If I remember correctly, getBoundingClientRect() can be used on most SVG elements too if you want to get coordinates according to the viewport. 

  • Like 2
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...