4

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?

Improve this question
3
  • 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
    Commented May 12, 2016 at 18:37
  • Yes, I don't want the stroke width being distorted.
    – Cai
    Commented May 12, 2016 at 18:44
  • Can then use javascript to add the attribute dynamically rather than manually adding to every path in case of more complex SVGs
    – Sonke
    Commented Dec 19, 2019 at 6:41

1 Answer 1

Reset to default
14

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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