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

[ahmad117]

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

[Cassie]

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?

[GreenSock]

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. 

[ahmad117]

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.

[ahmad117]

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. 

[GreenSock]

Happy to help, @ahmad117. 🎉