Scaling SVGs distorting path rounded corners.

[Seyi]

Hi, I'm trying to use one SVG Graph to show dynamically based on data fetched from a server. I'm using scaleY to shorten the height, then animating them with GSAP, I also had to manually set in transform-origins in CSS with !important, which I'm not comfortable doing. transformY doesn't seem to work in this case. I need some help shortening the SVG height without distorting the rounded corners.

 

Thank you.

See the Pen NWrVdNz by oluwadareseyi (@oluwadareseyi) on CodePen

[PointC]

Hi @Seyi 

 

Welcome to the forum.

 

I'd probably use rectangles with rx/ry attributes and animate the height instead of the scale. If you want to use paths, I'd recommend making each path 100% the height of the graph and then use a clipPath or mask to animate them on the y axis.

 

Make sense?

 

Happy tweening.

[Seyi]

1 hour ago, PointC said:

Hi @Seyi 

 

Welcome to the forum.

 

I'd probably use rectangles with rx/ry attributes and animate the height instead of the scale. If you want to use paths, I'd recommend making each path 100% the height of the graph and then use a clipPath or mask to animate them on the y axis.

 

Make sense?

 

Happy tweening.

Hi, PointC, rx/ry will round the corners of both the top and bottom, is there a way I can get an example on the path thing?

[ZachSaucier]

57 minutes ago, Seyi said:

rx/ry will round the corners of both the top and bottom

You could cover up the bottom using another element that's the same color as the background. Or use a clip path to hide their bottoms.

[PointC]

Exactly. Cover the bottom and you'll be good to go. Here's a quick example using the path elements and clipPath I mentioned above.

 

See the Pen wvWbjmw by PointC (@PointC) on CodePen

 

Depending on the size of your SVG, you may not even need a clipPath. If the bars are the same height as the actual SVG, you could just set overflow to hidden and accomplish the same thing.

 

Happy tweening.

 

[Seyi]

Worked like a charm. Thanks, guys.