how to solve svg path stoke width different thickness-CodePudding

I have a square hexagonal svg image, and i set stroke-width 4px for it. But the stroke thickness is not consistent, the vertical lines are thinner and the slanted lines are thicker.

demo image

<svg width="173" height="199" viewBox="0 0 173 199" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path stroke='#5088ff' stroke-width="4px" vector-effect="non-scaling-stroke" stroke-linecap="square" d="M86.5 0L173 50V150L86.5 199L0 150V50L86.5 0Z"/>
</svg>

I have searched and tried vector-effect="non-scaling-stroke", it does't work.

CodePudding user response：

Make sure that the stroke is not outside the viewBox. A stroke will be painted equal inside and outside the path outline.

Here I moved the path using transform/translate and make the width and the height of the viewBox larger.

<svg width="200" viewBox="0 0 177 203" fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <path stroke='#5088ff' transform="translate(2 2)" stroke-width="4"
    vector-effect="non-scaling-stroke" stroke-linecap="square"
    d="M 86.5 0 L 173 50 V 150 L 86.5 199 L 0 150 V 50 L 86.5 0 Z"/>
</svg>