我正在尝试使用wave SVG。我面临的问题是，我在底部得到了一个边界，我想删除它。
下面是我的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部分：

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: transparent;
 stroke-width: 0px;
}

下面是问题的图像：

请指点。