fripi Posted November 1, 2021 Share Posted November 1, 2021 Hi everyone, I'm just starting with svg and am a little lost; I just did those squares you can see in my pen now I have serveral questions: how can I center all those, is there an easy way or must I place them one by one in the global div of 970x600px ? once centered I would like to just trace one, the first, and then morph from one to each other, but did I defined the svg well to do that? or must i do separated svgs? another idea while I learn would be to trace them all like now, but then to illuminate (change the fill alpha in yoyo ?) randomly those rectangles. So yes I know a lot of questions in one time, trying to learn making svg, drawing and morphing 😅 Thanks for your time See the Pen MWvELwB by fripi (@fripi) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 1, 2021 Share Posted November 1, 2021 Hi Fripi! I'm not sure what you mean by center, apologies - could you explain visually what you want it to look like? Do you want all the squares on top of each other? 1 hour ago, fripi said: how can I center all those, is there an easy way or must I place them one by one in the global div of 970x600px ? You can morph between different shapes within an SVG, not need to move shapes into separate SVG's And lastly, to change the fill one by one, randomly - you could use a random stagger. Take a look at this page from the docshttps://greensock.com/docs/v3/Staggers Link to comment Share on other sites More sharing options...
fripi Posted November 1, 2021 Author Share Posted November 1, 2021 Thank you @Cassie I indeed added a random stagger, not sure it's all random but it's a start in the effect I was looking for. Regarding the center, nom all rectangles are alignes to top left, I would like to have them all in the center. I just centered them but it's not a very clean code, each position is done one by one by entering fix values, I would like to know if that can be done in a more efficient way Link to comment Share on other sites More sharing options...
Cassie Posted November 1, 2021 Share Posted November 1, 2021 Great! So SVG doesn't really have 'alignment' as such. That's more of an HTML/CSS thing. In SVG-land you have coordinates. The polyline takes an array of points. 0,0 is the coordinate for the top left of the SVG viewBox. So if you want to 'move' this - you'll have to redraw the coordinates to place the shape in a new position.<polyline id="mobimu" class="stroke" points="0,0 600,0 600,500 0,500 0,0" /> You could also use a rect element - it may be a little easier to adjust as it has a width, height and then an x and y to position the shape. (The x and y value are coordinates for the top left hand corner of the rectangle) <rect id="mobimu" class="stroke" x="50" y="50" width="100" height="100" /> Hope this helps! We try to keep the questions in these forums GSAP-specific, so If you have more SVG-related questions, I'd be happy to give you a link for my SVG slack community. Link to comment Share on other sites More sharing options...
fripi Posted November 1, 2021 Author Share Posted November 1, 2021 23 minutes ago, Cassie said: Hope this helps! We try to keep the questions in these forums GSAP-specific, so If you have more SVG-related questions, I'd be happy to give you a link for my SVG slack community. Yes thanks and oops sorry I got a little out of scope here 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 1, 2021 Share Posted November 1, 2021 No worries! Here you go pal - Lots of SVG experts in here who'll be happy to help you out!https://join.slack.com/t/svg-animation/shared_invite/zt-ld8zodr8-logjxuHIrrssl7EbB_XJHg Link to comment Share on other sites More sharing options...
GreenSock Posted November 1, 2021 Share Posted November 1, 2021 To do a "tracing" effect, you can use DrawSVGPlugin and to morph, use MorphSVGPlugin (members-only plugins). You can also center things by doing a simple gsap.set() with x and y offsets calculated using getBBox(). 👍 Link to comment Share on other sites More sharing options...
fripi Posted November 1, 2021 Author Share Posted November 1, 2021 56 minutes ago, GreenSock said: You can also center things by doing a simple gsap.set() with x and y offsets calculated using getBBox(). 👍 Kind of what I did here no ? var adW = 970/2, adH = 600/2, ads = document.getElementsByClassName("stroke"); for (var i = 0; i < ads.length; i++) { var element = ads.item(i); var positionInfo = element.getBoundingClientRect(); var height = positionInfo.height; var width = positionInfo.width; gsap.set(element,{x:adW-width/2, y:adH-height/2}) } must search what getBBox is, thanks 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 1, 2021 Share Posted November 1, 2021 That may work if you've always got the <svg> at exactly 100% scaling and it's in a fixed-width/height element. But getBBox() frees you from those constraints because it's scoped to the SVG's local coordinate system whereas getBoundingClientRect() is the global viewport coordinate system. 1 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