CSS实现带边框圆角正六边形左上角边框不显示问题排查

问题根因 #

• SVG路径未闭合：你定义的<path>的d属性结尾没有添加闭合命令z，路径终点和起点没有自动衔接，直接导致左上角对应位置的边框缺失
• 浮点误差值干扰：路径中写的l 2.004110622581e-13 -125.83是计算产生的精度误差值，本质就是0，异常数值也可能触发渲染异常

修复方法 #

给路径d属性结尾补充闭合命令z，同时把异常浮点值替换为0即可。修复后的完整代码如下：

<div class="universe__item">
  <div class='hex border'>
    <svg xmlns="http://www.w3.org/2000/svg" width="292" height="292" preserveAspectRatio='none'>
          <path d="
              M138 7.04
                a14 14 0 0 1 14 0
                l108.97560733739 62.91
                a14 14 0 0 1 7 12.12
                l0 125.83419246269
                a14 14 0 0 1 -7 12.12
                l-108.97560733739 62.91
                a14 14 0 0 1 -14 0
                l-108.97560733739 -62.91
                a14 14 0 0 1 -7 -12.12
                l 0 -125.83
                a14 14 0 0 1 7 -12.12
                z" vector-effect='non-scaling-stroke'>
            </path>
        </svg>
    <span>Some<br>text</span>
  </div>
</div>

配套CSS参考（实现边框、文字居中效果）：

/* 六边形边框配置 */
.hex.border path {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 2px;
}
/* 内部文字居中配置 */
.hex {
  position: relative;
}
.hex span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

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