如何让SVG rect的描边超出自身宽度？react-calendar-heatmap场景

你可以通过两个SVG相关属性实现让描边超出rect元素填补间隙，无需调整描边宽度或移动元素位置：

方法1：使用stroke-linecap: square（兼容性更优） #

默认SVG描边的端点是平齐状态（stroke-linecap: butt），设置为square后，描边端点会向外延伸出描边宽度一半的长度，刚好能填补相邻rect之间的小间隙。修改你的CSS类如下：

.left {
    stroke: black;
    stroke-dasharray: 0,30, 10, 10;
    stroke-linecap: square;
}

.topLeft { 
    stroke: black;
    stroke-dasharray: 10,20,10,10;
    stroke-linecap: square;
}

方法2：使用stroke-align: outer（现代浏览器适用） #

这个CSS属性可以让整个描边绘制在rect的外部边界上，而非默认的中心对齐（一半在元素内、一半在外）。这样描边会直接覆盖到相邻方块的间隙区域：

.left {
    stroke: black;
    stroke-dasharray: 0,30, 10, 10;
    stroke-align: outer;
}

.topLeft { 
    stroke: black;
    stroke-dasharray: 10,20,10,10;
    stroke-align: outer;
}

注意事项 #

• stroke-linecap是SVG标准属性，所有主流浏览器都支持，优先推荐该方案。
• stroke-align属于较新的CSS SVG特性，部分旧浏览器可能不支持，使用前请确认目标浏览器兼容性。

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