How to make stroke width immune to the current transformation matrix

by

Edit:

There is an attribute you can add to your rect to get exactly this behavior:

vector-effect="non-scaling-stroke"

This was wrong:

This will work if you apply the transform directly to the shape, not the group it is in. Of course, if you wanted to group several items and scale them all together, that approach won’t work.

<rect x="10" y="10" width="20" height="20" 
            stroke="blue" fill="none" stroke-width="2"
            transform="rotate(30) scale(5,1)"/>

This may also depend on your SVG viewer; Inkscape renders your file the way you want (stroke width not affected by scale) but Chrome renders it as you have shown.

Leave a Comment