ahmad117 Posted July 15, 2021 Share Posted July 15, 2021 I have tried changing the ScaleX, which is destroying the aspect ratio. I want to have same functionality with out destroying the aspect ratio, which is currently doing in this pen, you can check by clicking pos buttons, it looks very weird when its on position 3 or 4. Any help or any other method would be appreciated. Thank You See the Pen VwbpxqE by mian-muhammad-ahmad (@mian-muhammad-ahmad) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 15, 2021 Share Posted July 15, 2021 If you want to make it smaller whilst retaining aspect ratio you'll need scale rather than scaleX. Or are you trying to just make the central (horizontal) part of the line shorter without changing the stroke width? 1 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 15, 2021 Solution Share Posted July 15, 2021 I wonder if you're looking for the effect you can get by adding this attribute to your <path>: vector-effect="non-scaling-stroke" Other than that, I'm in the same boat as @Cassie in terms of not understanding what you mean by "aspect ratio" in this context. 1 1 Link to comment Share on other sites More sharing options...
ahmad117 Posted July 15, 2021 Author Share Posted July 15, 2021 1 hour ago, Cassie said: If you want to make it smaller whilst retaining aspect ratio you'll need scale rather than scaleX. Or are you trying to just make the central (horizontal) part of the line shorter without changing the stroke width? Thank you for your query on this, But @GreenSock answer work perfectly on this. 1 Link to comment Share on other sites More sharing options...
ahmad117 Posted July 15, 2021 Author Share Posted July 15, 2021 41 minutes ago, GreenSock said: I wonder if you're looking for the effect you can get by adding this attribute to your <path>: vector-effect="non-scaling-stroke" Other than that, I'm in the same boat as @Cassie in terms of not understanding what you mean by "aspect ratio" in this context. Thank You very much for this solution it worked pretty well, you can check it in live codepen. Just spent hours to achieve this. Thanks again. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 15, 2021 Share Posted July 15, 2021 Happy to help, @ahmad117. 🎉 2 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