全宽 SVG，Safari 中的舍入错误

Question

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

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

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

我不想要黑色边框。

我能想到的一个解决方案是在父容器上添加一个插入框阴影，即白色背景的颜色（本质上是覆盖它）。

我不能接受的解决方案：

• 负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 内容使用不同的规则，这会产生这种差异，在某些情况下

通过在后面画一个，我们保持整个绘图区域在相同的规则下，并且舍入保持一致-> 和将同时拉伸或收缩方向。