Seyi Posted November 19, 2020 Share Posted November 19, 2020 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 Link to comment Share on other sites More sharing options...
PointC Posted November 19, 2020 Share Posted November 19, 2020 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. 1 Link to comment Share on other sites More sharing options...
Seyi Posted November 19, 2020 Author Share Posted November 19, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 19, 2020 Share Posted November 19, 2020 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. 1 Link to comment Share on other sites More sharing options...
Solution PointC Posted November 19, 2020 Solution Share Posted November 19, 2020 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. 3 Link to comment Share on other sites More sharing options...
Seyi Posted November 20, 2020 Author Share Posted November 20, 2020 Worked like a charm. Thanks, guys. 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