Jump to content
GreenSock

ahmad117

how I can reduce the width of this SVG without destroying the aspect ratio

Go to solution Solved by GreenSock,

Recommended Posts

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

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?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • Solution

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. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

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