设置波浪SVG背景填充为#1F1F1F后缩放页面出现异常线条求助

这个异常线条是浏览器亚像素渲染导致的：页面缩放时，SVG波浪的边缘高度计算出现小数像素偏差，渐变背景和SVG波浪的接缝处会透出缝隙，就会出现你看到的细线。

可行解决方案（任选其一即可，也可叠加使用提升兼容性） #

方案1：偏移容器遮盖缝隙（推荐，改造成本最低）

给波浪SVG的父容器设置1像素的向下偏移，刚好遮盖接缝，多余的1像素和页面背景同色完全不影响视觉效果，修改CSS如下：

.custom-shape-divider-bottom-1632563716 {
    position: absolute;
    bottom: -1px; /* 将原有的bottom: 0修改为-1px即可 */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

方案2：调整SVG渲染精度

给SVG元素添加渲染精度属性，减少亚像素计算偏差，修改CSS如下：

.custom-shape-divider-bottom-1632563716 svg {
    position: relative;
    display: block;
    width: calc(144% + 1.3px);
    height: 152px;
    shape-rendering: geometricPrecision; /* 新增这一行属性 */
}

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