Safari中响应式图片用SVG mask-image缩放出现白线问题求助

我在响应式图片上应用SVG遮罩后，调整浏览器窗口大小时，只有Safari会出现奇怪的白色线条。当前使用的CSS代码如下：

.big-image img {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="2226" height="1745" viewBox="0 0 2226 1745" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2225.86 1744.2L94.7251 1436.7C33.917 1427.93 -7.91689 1371.05 1.82585 1310.39L212.208 0.500535L2225.86 0.500486L2225.86 1744.2Z" fill="#000000"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg width="2226" height="1745" viewBox="0 0 2226 1745" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2225.86 1744.2L94.7251 1436.7C33.917 1427.93 -7.91689 1371.05 1.82585 1310.39L212.208 0.500535L2225.86 0.500486L2225.86 1744.2Z" fill="#000000"/></svg>');
    -webkit-mask-size: cover;
    mask-size: cover;
}

解决方法 #

这是Safari缩放SVG遮罩时的渲染精度bug，可通过以下方式修复：

• 给遮罩路径添加细微描边：在SVG的<path>标签中添加stroke="#000" stroke-width="0.5"，填补渲染间隙。修改后的代码：

.big-image img {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="2226" height="1745" viewBox="0 0 2226 1745" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2225.86 1744.2L94.7251 1436.7C33.917 1427.93 -7.91689 1371.05 1.82585 1310.39L212.208 0.500535L2225.86 0.500486L2225.86 1744.2Z" fill="#000000" stroke="#000" stroke-width="0.5"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg width="2226" height="1745" viewBox="0 0 2226 1745" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2225.86 1744.2L94.7251 1436.7C33.917 1427.93 -7.91689 1371.05 1.82585 1310.39L212.208 0.500535L2225.86 0.500486L2225.86 1744.2Z" fill="#000000" stroke="#000" stroke-width="0.5"/></svg>');
    -webkit-mask-size: cover;
    mask-size: cover;
}

• 简化SVG坐标精度：将path中的小数坐标调整为整数（如M2225.86改为M2226），减少缩放时的精度误差。

• 强制遮罩居中：添加-webkit-mask-position: center; mask-position: center;，确保遮罩缩放时始终居中，避免边缘偏移线条。

• 匹配容器背景色：如果图片边缘颜色固定，给.big-image设置相同背景色，覆盖潜在线条。

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