Jump to content
Search Community

Positioning element inside a sliced SVG to the corner of the screen

Adel test
Moderator Tag

Recommended Posts

Hey guys!

I have an SVG that has to cover the entire viewport, so I added "xMidYMid slice" for aspect ratio, but now I am unable to position an element inside it.

I would like to scale down the globe logo to a given size (54px) and move it exactly to the top left corner.

Could you please help me out? 😇

See the Pen rNdxmwb?editors=1010 by adelkov (@adelkov) on CodePen

Link to comment
Share on other sites

Hi @adelkov welcome to the forum!

 

You can use .getBBox()  to get coordinates from the SVG space (read more about it on the MDN docs). And then I would find the origin point from where you want to transform the element and that that as the svgOrigin (check more about it in this forum thread)

 

See the Pen eYMgWyv by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

There are many approaches you could take...

 

One is to just let Flip plugin do all the work for you, either by using a "dummy" element that you put in the spot you want it to go (and at the appropriate size), and then Flip.fit() to that: 

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

 

I put a red outline around the "dummy" element just so you could see it, but obviously you'd remove that. 

 

Or you could build your SVG so that the globe fills the viewBox, but initially gsap.set() the scale to a smaller value to keep it at the proportion you want when it's full screen. Then, to make it to go 54x54 in the top corner, you could use Flip plugin to get the state, then add a class that completely changes its positioning in the DOM so that the <svg> is 54x54, top: 0, left: 0, maybe position: fixed with the scale removed from the logo artwork, and then Flip.from() the previous state. It would look seamless but you'd end up in the final state you want. Plus it'd be responsive. 

 

There are quite a few other ways to accomplish it. Hopefully this gets you going in a helpful direction. 

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