如何解决SVG路径描边宽度不一致的问题

你的正六边形左右垂直边刚好卡在SVG视口的最左（x=0）和最右（x=173）边缘，描边宽度设为4px时，描边会向路径两侧各延伸2px，超出视口的部分被自动裁剪，导致垂直边实际只显示了2px的描边厚度；而斜线的描边没有超出视口，保持了完整的4px，所以视觉上出现粗细不一致的情况。vector-effect="non-scaling-stroke"是用来解决缩放场景下描边变形的，和当前问题无关。

以下三种方法都能解决这个问题：

• 方法一：允许SVG显示超出视口的内容
  给SVG标签添加overflow="visible"属性，让完整的描边得以展示：

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

• 方法二：扩展SVG视口空间
  调整SVG的viewBox和尺寸，给描边留出足够的扩展空间（左右上下各加2px）：

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

• 方法三：调整路径坐标
  将左右垂直边向内移动2px，避免描边超出视口范围：

<svg width="173" height="199" viewBox="0 0 173 199" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path stroke='#5088ff' stroke-width="4" stroke-linecap="square" d="M86.5 2L171 50V150L86.5 197L2 150V50L86.5 2Z"/>
</svg>

如果后续需要应对缩放场景，可以继续保留vector-effect="non-scaling-stroke"属性，不会影响当前问题的解决。

内容的提问来源于stack exchange，提问作者cuteyy