1

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): http://codepen.io/Cai_/pen/pyBobP

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?

  • So you want the space around the white to be the same on the sides as with the top and bottom? As a percentage, I assume? I'm not sure I understand what you're trying to do – Zach Saucier May 12 '16 at 18:37
  • Yes, I don't want the stroke width being distorted. – Cai May 12 '16 at 18:44
6

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.