响应式 SVG 错误 - SVG 在它们之间创建 "separing" 白线

Question

我正在建立一个网站，我在其中使用 SVG 图像作为主要背景，此 SVG 分为 3 个，header，主要背景和一个除数，我的想法是让它们看起来像一个 svg，对于桌面，它们的显示效果很好，问题出在移动设备上，在某些宽度下，“浏览器”或 SVG 开始在它们之间创建小白线（参见 link 图片，绘制区域用于保密协议)https://flic.kr/p/2naLed2

我试着搜索已经问过的关于这个问题的问题，我尝试的第一个解决方案是给 SVG 一个负边距顶部，这适用于其中一个插图，但另一个一直显示白线。我认为问题出在 SVG 的渲染或类似的东西上，但我找不到可行的解决方案。我会让网站的那部分 SASS。

主图和除数在页面img标签上

.main-ilustration {
        margin: 0;
        background-color: #07070f;

        .ilustration {
            width: 100%;
            margin-top: -1px;
        }

        .ilustration-divisor{
            margin-top: -2px;
            margin-bottom: -1px;
        }
    }

和 SASS 为 header

header {
    background-image: url(../Pictures/Banner-Header.svg);
    background-repeat: repeat;
    
    .container-fluid {
        padding: 1rem 2rem;
    }
}

Answer 1

我可以提供的合适解决方案是您需要从 illustrator 中的 SVG 文件中删除背景，然后将黑色 background-color 设置为主体。

响应式 SVG 错误 - SVG 在它们之间创建 "separing" 白线

SVG error on Responsive - SVGs creating a "separing" white line between them

css

svg

sass

responsive-design