全宽 SVG，Safari 中的舍入错误

Question

在下图中，注意粉色 SVG 的左右两边是黑色边框：

演示：https://codepen.io/mhulse/pen/PoZGEqJ

在 Safari 中以特定视口尺寸查看时会发生这种情况（只需调整浏览器 window 即可查看）。

我不要黑边

我能想到的解决办法是给父容器添加一个inset box shadow，也就是白色背景的颜色（本质上是遮盖）。

无法接受的解决方案：

left/right 的负 1px 边距。溢出是不可接受的，因为它会导致水平滚动（真实世界的用例触及浏览器视口的边缘）。
溢出隐藏在父级上（真实世界的用例可能要求子级绝对定位在容器之外）。

是否可以在 Safari 中强制 SVG 始终接触容器的边缘并且没有黑色间隙？

Answer 1

您可以直接在 svg 图像中使用作为背景，而不是 CSS 背景。

body {
  padding: 20px;
}
.box .box-x-cap {
  display: block;
  width: 100%;
}

<div class="box">
  <svg class="box-x-cap" aria-hidden="true" viewBox="0 0 1600 227">
    <rect width="1600" height="277"/>
    <path d="m0 227v-227h1600v32z" fill="pink"></path>
  </svg>
  <p>This is some content.</p>
</div>

这里的问题是大多数浏览器会尽力避免在 DOM 元素上进行抗锯齿，为此，它们会舍入本应浮动的坐标。
Safari 肯定对 HTML 元素和 SVG 内容使用不同的规则，这会产生这种差异，在某些情况下

通过在后面绘制一个，我们使整个绘图区域保持相同的规则，圆角保持一致-> 和会一起拉伸或收缩同一个方向。

全宽 SVG，Safari 中的舍入错误

Full width SVG, rounding errors in Safari

svg

safari

rounding-error