Responsive SVG path without distorting stroke


I have a simple SVG path with a stroke that I want to responsively resize with the browser window. The problem is that when my paths aspect ratio is changed, the stroke is distorted.

This is the original path on the left and the distorted shape on the right:

enter image description here

Live example (resize your browser):

I need the rectangle to be one single path with a stroke so I can animate stroke-dashoffset / stroke-dasharray etc.

I could use javascript to update the path but I would like to know if there is a way to do this with pure SVG (and CSS).

Can I create a responsive SVG path without stretching or distorting the stroke?

5/12/2016 7:02:00 PM

Accepted Answer

As covered in this SO post, you should use vector-effect="non-scaling-stroke" to keep the stroke width the same regardless of the scaling. Updated demo

5/23/2017 12:40:00 PM