如何摆脱 SVG 图像上的边框？

Question

我是第一次使用 SVG 图像，这是我第一次使用它们。我不是 CSS 动画的设计师或专家，所以我使用了 SVG 波形发生器。我在 SVG 图像的底部得到了这个奇怪的边框，但它只在移动视口上这样做。我不知道如何正确解决这个问题。

这是该行的屏幕截图

这是我的 HTML 和从生成器复制的 CSS 中的 SVG 代码。感谢您的帮助！

.custom-shape-divider-bottom-1611177487 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        border: none !important;
        stroke: transparent;
        stroke-width: 0px;
    }

    .custom-shape-divider-bottom-1611177487 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 150px;
        border: none !important;
        stroke: transparent;
        stroke-width: 0px;
    }

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#2e38a4" fill-opacity="1" d="M0,160L48,165.3C96,171,192,181,288,197.3C384,213,480,235,576,250.7C672,267,768,277,864,261.3C960,245,1056,203,1152,197.3C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>

Answer 1

css class

.stroke{
    stroke: rgb(255,255,255);
    stroke-width: 0;
}

body{
background-color:red;
}
 .stroke{
stroke: rgb(255,255,255);
stroke-width: 0;
}

.custom-shape-divider-bottom-1611177487 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        border: none !important;
        stroke: transparent;
        stroke-width: 0px;
    }

    .custom-shape-divider-bottom-1611177487 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 150px;
        border: none !important;
        stroke: transparent;
        stroke-width: 0px;
    }

 <svg class="stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#2e38a4" fill-opacity="1" d="M0,160L48,165.3C96,171,192,181,288,197.3C384,213,480,235,576,250.7C672,267,768,277,864,261.3C960,245,1056,203,1152,197.3C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>

Answer 2

我认为当您使用此 svg 时 svg 中存在问题，您使用 transform scalY 来调整您需要的位置。这不是笔划问题，因为 svg 的视口问题所以只需添加以下 margin-top : -1px;解决这个问题。

.custom-shape-divider-bottom-1611177487 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        border: none !important;
        stroke: transparent;
        stroke-width: 0px;
    }

    .custom-shape-divider-bottom-1611177487 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 150px;
        border: none !important;
        stroke: transparent;
        stroke-width: 0px;
    }
   svg{
margin-top:-1px;
}

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#2e38a4" fill-opacity="1" d="M0,160L48,165.3C96,171,192,181,288,197.3C384,213,480,235,576,250.7C672,267,768,277,864,261.3C960,245,1056,203,1152,197.3C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>

如何摆脱 SVG 图像上的边框？

How to get rid of border on a SVG image?

html

javascript

css

svg

responsive-design