Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vektor

SVG translate elements from svg coordinates

Recommended Posts

Hi, I have researched and tried various things but can't work out if there is a way to translate svg elements from 'absolute' coordinates?

 

i.e. translate a bunch of svg elements all starting from the center, and finishing at their actual position

 

So in the codepen, I would like to tween all the chickens from the black box to their actual positions ( on the black lines ) 

 

Currently, I put in the x,y value of the black box to tween from, but the chickens use this as a relative x,y

 

I could work out the correct relative x,y value to tween from, but in the real project there are many elements that may change slightly 

 

Am I missing something obvious?

 

Thanks :)

 

See the Pen wEpZEM by bananafarma00 (@bananafarma00) on CodePen

Link to comment
Share on other sites

Hi @vektor,

 

Here's an option to build a centered coop for the chickens (the chickens are fitting not perfect to the viewbox !).

Relative to the wrapper you can now send the chicken in the corners:

 

See the Pen XPVLqd by mikeK (@mikeK) on CodePen

 

Here an example for centering info

 

Happy tweening ...

Mikel

 

 

  • Like 4
Link to comment
Share on other sites

Great, thanks! 

 

So that works if I rebuild the scene using multiple svgs / elements, which will work for some things 

 

However one of the SVGs I need to animate has lots going on so it won't really be possible to recreate it like this

 

So the technique of css absolute positioning won't affect anything inside the SVG

 

So my main issue seems to be: How to center / set absolute coordinates of the svg elements inside the svg using GSAP?

 

 

Is there a simple way to do this, I'm thinking due to the nature of SVG maybe there isn't..?

 

If that's the case I can just manually pass in the correct relative x,y values needed, or make some changes to the svg file itself

?

 

My not-working codepen below

See the Pen OoQLpW by bananafarma00 (@bananafarma00) on CodePen

 

Link to comment
Share on other sites

The trick here is that all those SVG child elements like <g> and <rect> have x and y of 0,0.

Please see this thread here in which @OSUblake explains getBBox() and provides a helper function that takes into account transforms.

 

 

Its probably a bit more than you need for this, but its a great utility to have around.

 

 

I used his getBBox() function to figure out the distance between the x and y of each chicken and the box using a function-based value for each chicken in a single tween.

 

var tl = new TimelineLite();
var rectBox = getBBox(document.getElementById("box"))

tl.from(".chicken", 1, { 
  x:function(index, element){
    var chickenBox = getBBox(element, true);
    return rectBox.x - chickenBox.x
  },
  y:function(index, element){
    var chickenBox = getBBox(element, true);
    console.log(chickenBox);
    return rectBox.y - chickenBox.y
  }
});

 

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

 

 

 

  • Like 5
Link to comment
Share on other sites

Hi @vektor,

 

The masters voice ...


But here are many ways to Rome - and out of the coop.
Here is a version with clones ... in an SVG:

 

See the Pen aaqzQK by mikeK (@mikeK) on CodePen

 

Vote for happy chicken ...

 

Mikel

 

 

  • Like 5
Link to comment
Share on other sites

@mikel in keeping with the license agreement, please be sure that GSAP is only used in the ethical cloning of 100% organic chickens.

 

:)

 

 

  • Like 1
  • Haha 5
Link to comment
Share on other sites

??

 

Cheers guys, getBBox() is what I was looking for !! 

 

The cloning method is clever too, wouldn't quite translate to my real life project though 

 

The forum post on SVG gotchas about BBox was very helpful ?

  • Like 2
Link to comment
Share on other sites

Hi @Carl,

 

I assume you mean 100% pixeled virtual chicken.

 

In real life, my Cesars salad only contains meat from free-range chickens
and for breakfast eggs from happy chickens.
No gene food and cloning.

 

Best regards

Mikel

 

  • Haha 4
Link to comment
Share on other sites

This demo uses a slightly modified version of that function. The object returned by that function has cx and cy properties, which are for centerX and centerY. That can help out a lot if you're trying to center stuff.

 

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

 

 

It's also helpful when scale or rotation is involved as the top-left corner might be in a different position.

 

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

 

 

 

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