SVG下方的神秘小水平线消失并出现答案

【问题标题】：Mysterious small horizontal line below the SVG that disappear and appearSVG下方的神秘小水平线消失并出现
【发布时间】：2020-09-05 21:42:22
【问题描述】：

我是 SVG 的菜鸟。我正在尝试将 SVG 集成到我的布局中，但它在它下面给了我一条神秘的小白线，在不同的屏幕尺寸上不时出现和消失，有人可以解释 SVG 有什么问题吗？提前谢谢

Small line image

<footer className={classes.Footer} id="footer">
            <img src={footerimg} alt=""/>
            <div className={classes.Content}>
            </div>
</footer>

// my css 
.Footer {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid red;
flex-flow: column;
}

 .Footer img {
    display: block;
    width: 100%;
}

 .Content {
  width: 100%;
  background-color: #5e58f8;
  height: 500px;
}

主要的 SVG 文件是

<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="2003" height="226.55" style="">
    <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
    <defs>
        <style>.cls-1{fill:#5e58f8;}</style>
    </defs>
    <title>svgFooter2</title>
    <g class="currentLayer" style="">
        <title>Layer 1</title>
        <path class="cls-1" d="M0,226.55000001192093 S215.26,-91.44999998807907 695.74,26.07000001192093 C1405,199.55000001192093 2003,8.550000011920929 2003,8.550000011920929 V226.55000001192093 z" id="svg_1"/>
    </g>
</svg>

【问题讨论】：

标签： html css svg

【解决方案1】：

移除 img 标签的边框将有助于您实现这一目标

.Footer {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid red;
flex-flow: column;
}

 .Footer img {
   display: block;
   border:none;
    width: 100%;
}

 .Content {
  width: 100%;
  background-color: #5e58f8;
  height: 500px;
}

<footer className=Footer id="footer">
            <img src=err.png alt="wrong"/>
            <div className=Content>
            </div>
</footer>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="2003" height="226.55" style="">
    <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
    <defs>
        <style>.cls-1{fill:#5e58f8;}</style>
    </defs>
    <title>svgFooter2</title>
    <g class="currentLayer" style="">
        <title>Layer 1</title>
        <path class="cls-1" d="M0,226.55000001192093 S215.26,-91.44999998807907 695.74,26.07000001192093 C1405,199.55000001192093 2003,8.550000011920929 2003,8.550000011920929 V226.55000001192093 z" id="svg_1"/>
    </g>
</svg>

【讨论】：

我想了想，也试过了，但还是没有解决问题。这条线不会永久出现，但在某些屏幕尺寸上是的，而其他屏幕尺寸根本没有