如何去除SVG底部出现的边框？技术问题求助

问题场景 #

使用波浪SVG时，底部出现了一条与父容器背景色一致的边框，尝试设置stroke: transparent和stroke-width: 0无效。

相关代码 #

JSX代码

<DarkWave>
  <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
     <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
           class="shape-fill"></path>
     </svg>
</DarkWave>

CSS代码（styled-components）

export const DarkWave = styled.div`
    width: 100%;
    overflow: hidden;
    line-height: 0;
    height: 95vh;
    background-color: #705df2;
    transform: rotate(180deg);
    margin-bottom: 5rem;

    svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 127px;
        
    }

    path.shape-fill {
        fill: #ffffff;
    }
`;

问题原因 #

这条“边框”并非SVG的stroke，而是SVG的空白区域透出了父容器的背景色。因为父容器设置了transform: rotate(180deg)，SVG也随之旋转，原本SVG顶部的空白区域转到了底部，而path没有完全覆盖SVG的整个viewBox高度（120px），导致父容器的紫色背景透过空白区域显示出来，看起来像边框。

解决方法 #

方法一：修改SVG路径，完全覆盖viewBox

调整path的d属性，让路径延伸到SVG的边缘，消除空白区域。将原路径中的V0修改为V120（匹配SVG的viewBox高度）：

<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>

方法二：给SVG设置与父容器一致的背景色

在CSS中给SVG添加背景色，填充空白区域：

export const DarkWave = styled.div`
    /* 原有样式保留 */
    svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 127px;
        background-color: #705df2; /* 添加该行 */
    }
    /* 原有样式保留 */
`;

方法三：调整SVG高度匹配viewBox

如果上述方法无效，可以将SVG的height调整为与viewBox高度一致（120px），避免因高度不匹配产生空白：

svg {
    /* 其他样式不变 */
    height: 120px; /* 修改为120px */
}

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