Jump to content
Search Community

[closed] how to absolute position svg elements with Gsap?

Friebel test
Moderator Tag

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

Hi everybody,

 

For projects I import svg-files created with graphical software like Illustrator and now mostly Affinity Designer. I'd like to do 'absolute' positioning of objects inside svg space most of the time. Till now I put the graphical elements on their 0,0 positions inside the svg by the graphical software to be able to do absolute positioning with TweenLite.set(... {x, y}...) or use transforms to put them on desired locations. But that's not my ideal workflow, because I have to change the design which generates the svg output.

 

I prefer to keep the design as is and position the elements after loading the svg by javascript with TweenLite to the right positions by absolute svg-locations instead, but so far I can't find a way to do this. I understand some svg elements have attributes like cx and cy to set positions absolute, but a lot if time I need to animate svg groups <g> and they don't have these kind of properties. Or paths, wich would take a lot more extra code to change the data just to move an element.

 

So Does anybody here know if it is possible to set absolute svg positions with TweenLite/-Max? That would help me a lot!!

 

Thanks!

 

 

 

 

Link to comment
Share on other sites

2 hours ago, Friebel said:

So Does anybody here know if it is possible to set absolute svg positions with TweenLite/-Max?

 

 

Everything is absolutely positioned in SVG. Transforms transform the canvas. The element's position never changes. 

 

You can test that out by checking the bounding box of an element that isn't a container.

 

console.log(rect.getBBox().x); // => 150

TweenLite.to(rect, 1, {
  x: 9000,
  onComplete() {
    console.log(rect.getBBox().x); // => 150 ?
  }
});

 

 

Check out this post for more information, and my solution for positioning.

https://greensock.com/forums/topic/13681-svg-gotchas/?page=2&amp;tab=comments#comment-72060

 

 

Scaling and rotation can mess stuff up. Trying to move the top-left corner of the rect to a point ? 

 

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

 

 

Trying to move the center of the rect to a point ?

 

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

 

 

 

More demos...

 

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

 

 

 

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

 

 

 

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

Thanks @OSUblake. My questions was pretty dumb and I posted it too soon. Thanks for bringing to my attention that everything inside svg is absolute. That's something I know. 

My problem here is in fact that the graphical software (in this case Affinity Designer for a project I'm working on now) is not (always) using transforms to position groups, but applies all positioning to all sub-objects of a group. That makes it pretty difficult to animate in Javascript, because then we have to position all children instead of the group.

 

So, guess I wasn't really thinking when posting this question. 

 

Maybe a solution to this 'problem' would be to output transforms on groups again. But problem is that Designer is not always that nice in it's svg output, so it wouldn't surprise me if they still output pre-calculated positions on the group-children instead of letting the children stay on their zeros and just applying transforms to the group. But I will look for that.

 

I was also thinking about using something like 'transformOrigin' to compensate the children positions back to 0, 0 by adding a transformOrigin to the group. That might work when reading out the first child offset (= position) inside the group and use that value negatively as a transformOrigin to the group. So then I could (hopefully) apply a transform to the group like as it was originated all elements around 0,0 to set it to absolute positions.

 

But let's start with the first method! I don't like that second option.


Don't have a clue if what I'm writing makes sense to anybody reading this, if I explained myself well, but anyway...

 

thanks again for your help @OSUblake. Sorry for the silly newby question

Link to comment
Share on other sites

@Friebel do you have a demo (even a super simple one) that illustrates the issue you're trying to solve? I guess there are ways you could rip through all the elements and concatenate all the transforms to make things "global", but I'm not sure you really need to (yet). A demo would go a long way in helping folks understand what you need. 

Link to comment
Share on other sites

1 hour ago, MindGamer said:

IMHO it's not really clear what the problem is.

 

It sounds like the issue could be solved by either modifying the grouping within Affinity prior to SVG export, or doing a replace-all on any positions in your SVG using a text editor. No?

 

 

Totally agree. Pretty fuzzy

 

1 hour ago, GreenSock said:

@Friebel do you have a demo (even a super simple one) that illustrates the issue you're trying to solve? I guess there are ways you could rip through all the elements and concatenate all the transforms to make things "global", but I'm not sure you really need to (yet). A demo would go a long way in helping folks understand what you need. 

 

sorry, maybe I should have said this thread can be closed. This is something I have to find out for myself now.

Sorry for being so fuzzy. I'm in some nasty private situation now, so my head was a little fuzzy yesterday. I'm looking for a button to close this thread, but can't find it. Anyway, this one can be closed. I'll rename the title.

 

Thanks again everybody here for trying to help.

 

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