SVG rect使用stroke-dasharray时左上角出现多余像素如何修复？

问题根本原因 #

你当前的代码逻辑没有问题，缺口来源于浏览器对闭合路径虚线的渲染误差：
矩形描边的绘制起点是左上角，顺时针绘制，你设置的stroke-dasharray="50 25"刚好匹配矩形周长（(50+25)*2=150px），刚好走满一圈：上边框50px（实）→ 右边框25px（虚）→ 下边框50px（实）→ 左边框25px（虚），刚好回到左上角起点。浏览器计算描边首尾衔接的坐标时，受浮点数精度、抗锯齿渲染逻辑的影响，会在起点位置漏出小缺口，属于浏览器SVG渲染层的共性实现问题，和你测试的Chrome、Firefox版本的底层渲染逻辑有关。

仅通过rect的stroke属性可以实现需求 #

只需要给rect添加stroke-dashoffset属性，将虚线的起始点偏移极小的数值，避开左上角的衔接点即可，调整后的代码如下：

<svg viewBox="-64 -24 178 73" xmlns="http://www.w3.org/2000/svg">
    <rect stroke-dasharray="50 25" width="50" height="25" fill="none"
          stroke="black" stroke-dashoffset="0.5"></rect>
    <text x="25" y="13" text-anchor="middle" dominant-baseline="central"
          font-size="10px" fill="#414141">Database
    </text>
</svg>

0.5的偏移量刚好可以错开衔接点，不会影响上下边框的长度和起始位置，完全符合你的预期。

更稳定的兼容实现方案 #

如果要完全避开闭合路径的渲染问题，适配所有浏览器版本，建议直接用path元素绘制上下两条独立边框，不需要依赖虚线属性，效果100%可控：

<svg viewBox="-64 -24 178 73" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h50 M0 25h50" stroke="black" fill="none"/>
    <text x="25" y="13" text-anchor="middle" dominant-baseline="central"
          font-size="10px" fill="#414141">Database
    </text>
</svg>

这个方案上下边框长度均为50px，x轴起始位置都是0，没有任何缺口，兼容性更好。

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