Adel Posted July 16, 2022 Share Posted July 16, 2022 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 More sharing options...
mvaneijgen Posted July 16, 2022 Share Posted July 16, 2022 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 3 Link to comment Share on other sites More sharing options...
GreenSock Posted July 16, 2022 Share Posted July 16, 2022 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. 1 Link to comment Share on other sites More sharing options...
Adel Posted July 17, 2022 Author Share Posted July 17, 2022 Thank you both for the answers I ended up using the Flip plugin - it was precisely what I needed. What an amazing library and community, thank you so much! 🙏 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now