Jump to content
Search Community

Aligning SVG viewBox with container size

dwigt 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

I am trying to make a SVG animation. However the SVG viewbox is larger than the container i am using.

 

Is there any way to account for the scaling of the SVG?

 

I think the Codepen is the best example:

 

Is there an easy way to make sure the red square is moved outside the square and not just halfway without changing the viewBox?

 

Come to think of it. I can divide the viewbox with the size of the SVG to get a scale coefficient. Is this the way to do it? or is there a helper method in TweenMax?

See the Pen KKKWQZm?editors=1111 by dwigt (@dwigt) on CodePen

Link to comment
Share on other sites

Hey dwigt and welcome.

 

The best articles I've read about SVG's coordinate system are Sara Souidan's article series starting here. I highly recommend that you read them thoroughly as they are very helpful in getting a better understanding of how SVG works.

 

As for your question, there's a lot of ambiguity in exactly how you want this to work. What's the expected behavior that you're wanting? Are you wanting the SVG element to translate like a DOM element (not in the SVG coordinate space) so that the rectangle just barely goes outside of the green square in the demo that you provided? How are you wanting the size of the SVG square to scale based on the page size? Why are you using SVG for this in the first place?

 

There likely are ways of doing what you want, you just need to help us understand exactly what you want :) 

Link to comment
Share on other sites

Hi ZachSaucier

 

Thank you for your response and the article by Souidan.

 

I will try to clarify. I need to make a series of banner formats. By using an SVG I can export a bunch of objects and have them positioned without too much difficulty because they are inside an SVG. I like to use SVG's if I can to keep filesize down and not have to worry about sizes and scaling.

 

With this animation I am trying to make it look like snow falling from the sky to the ground. As you said I need the square to behave like a DOM element not in the SVG coordinate space. This way the square will go just barely outside the green square, then I can reset the position and play it over.

 

I actually thought of a way to do it while writing this post.. By scaling the animation equal to the difference between the DOM and the SVG coordinate system, and it is an okay solution. I edited the codepen to show what I mean:

See the Pen KKKWQZm by dwigt (@dwigt) on CodePen


I am still wondering if there is an easier ways to do such such a manipulation. I am also doing some heavy calculations while the animation is running. I might have to think of a way to do it beforehand.. oh and also read Souidans article. Thanks!

 

 

 

 

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