特定宽度下非0,0起始的SVG多边形出现细线裂缝求助

这种亚像素渲染导致的缝隙在高DPI设备或者特定缩放比例下真的很头疼，尤其是不同浏览器的渲染算法还不一样——你说的Pixel上出现、iPhone X正常的情况，就是Chrome和Safari的渲染差异搞的鬼。结合你的SVG场景（2:1比例的viewbox），给你几个亲测有效的修复方案：

• 给多边形加个“隐形”的描边补缝
  利用vector-effect: non-scaling-stroke让描边不随缩放变化，再用和多边形填充色一致的1px描边覆盖缝隙。直接给你的polygon加这段样式就行：

  #splashImage polygon {
    vector-effect: non-scaling-stroke;
    stroke: /* 这里填你的多边形填充色 */;
    stroke-width: 1;
  }
  

  这个方法不会影响图形的整体尺寸，还能完美盖住亚像素偏移产生的缝隙，视觉上完全看不出痕迹。

• 强制整数像素定位
  用shape-rendering: crispEdges告诉浏览器放弃亚像素渲染，直接用整数像素定位元素。虽然可能会让边缘在某些缩放比例下略显生硬，但能彻底解决缝隙问题：

  #splashImage polygon {
    shape-rendering: crispEdges;
  }
  

• 让viewbox和容器尺寸严格匹配
  你的SVG viewbox是2400x1200（标准2:1），确保容器的实际尺寸也是严格的2:1比例——比如容器宽度设为100vw，高度就设为50vw，别用百分比或者其他可能导致非比例的计算值。另外，也可以尝试把viewbox改成和目标设备宽度的整数倍，比如Pixel的屏幕宽度是1080px，那viewbox设为2160x1080，这样缩放时是整数倍，减少亚像素计算的误差。

• 合并成带蒙版的图片（静态场景适用）
  如果不需要动态修改SVG内容，直接用图形工具（比如Illustrator）把多边形作为蒙版盖在图片上，导出成一张PNG/JPG，然后用img标签引入。这样完全绕开了SVG的渲染问题，肯定不会有缝隙。

这些方法我在处理类似的跨设备SVG渲染问题时都用过，应该能解决你遇到的Pixel上的裂缝问题。

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