如何擺脫 SVG 圖像上的邊框？

Question

我是使用 SVG 圖像的新手，這是我第一次使用它們。 我不是 CSS 動畫的設計師或專家，所以我使用了 SVG 波發生器。 我在 SVG 圖像的底部得到了這個奇怪的邊框，但它只在移動視口上這樣做。 我無法弄清楚如何正確解決此問題。

這是該行的屏幕截圖

這是我的 HTML 中的 SVG 代碼和我從生成器復制的 CSS 代碼。 謝謝你的幫助！

 .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

我認為 svg 中存在問題，而您使用此 svg 您使用了變換比例來調整 position 您需要什么。 這不是一個中風問題，因為 svg 的視口問題所以只需添加以下邊距頂部：-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>

Answer 2

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>