Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fripi

SVG : centering and morphing

Recommended Posts

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

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 docs

https://greensock.com/docs/v3/Staggers

Link to comment
Share on other sites

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

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

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 

  • Like 1
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

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. 

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