Chrome打印SVG预览时出现额外黑线的技术求助

我之前也碰到过类似Chrome旧版本打印SVG的坑，你遇到的这个问题，本质是Chrome屏幕渲染和打印渲染管线的差异，加上亚像素线条的渲染逻辑冲突导致的。Chrome 65/67这类旧版本的打印引擎（基于Skia的分支实现）在处理细线条时，当线条位置刚好落在亚像素边界，或者描边宽度为1px这类临界值时，会错误地叠加出一条反差黑线——屏幕渲染时因为显示逻辑的优化看不到，但打印预览（模拟物理打印的渲染逻辑）就会暴露出来。

下面是几个亲测有效的解决办法，按优先级推荐：

• 调整线条坐标到整数网格：如果你的<line>元素用了带小数的坐标（比如x1=10.5），改成整数坐标（比如x1=10）。亚像素偏移是触发这个bug的常见原因，让线条对齐像素网格能避免渲染计算时的混合错误。
• 添加形状渲染优化属性：给你的.grid类加上shape-rendering: crispEdges;，强制Chrome以无抗锯齿的方式渲染线条，跳过亚像素混合的逻辑，从根源上避免黑线出现。示例代码：

  .grid {
    stroke: red;
    stroke-width: 1;
    shape-rendering: crispEdges; /* 关键修复属性 */
  }
  

• 微调描边宽度：把stroke-width从1改成1.1或者0.9，或者换成物理单位（比如1pt）。1px的细线在打印渲染中属于临界宽度，微小的调整能让打印引擎的渲染逻辑避开bug触发点。
• 替换为路径元素：如果<line>元素还是有问题，换成<path>来绘制直线，比如用<path d="M 10 10 L 90 10" class="grid" />代替<line>。路径的渲染逻辑在打印时比直线元素更稳定，不容易出现异常。
• 检查打印媒体样式：确认你的CSS里没有@media print规则意外修改了线条的颜色、宽度，比如有没有误加了stroke: black的打印样式。

另外，如果你能升级Chrome到更新的版本，这个bug在后续的Chrome版本中已经被修复了，不过如果受限于环境无法升级，上面的方法足够解决问题。

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