神秘的小水平线下面的SVG消失和出现

Question

我是SVG的新手。我正试图在我的布局中集成一个SVG，但它在它下面给了我一条神秘的白色细线，它在不同的屏幕大小上不时出现和消失。有人能解释一下SVG出了什么问题吗？thx提前

小行图像

<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>

Answer 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>

Answer 2

很晚了，但我希望这个解决方案能帮助任何仍在挣扎的人。

看看这个问题。

chrwahl的回答给出了4个解决方案。我把第三个应用到你的例子中，这句话就消失了。它所做的只是向路径添加一个转换属性，该属性在y轴上转换svg 1像素。您可以使用该属性控制需要向上或向下移动的距离。

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;
}

<footer id="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>

<!-- Note the transform   -->
<path 
transform="translate(0 1)" 
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>
<div class="Content">
</div>
</footer>

---

然而，您说过它会在不同的屏幕尺寸上消失。SmilyLily的回答为我解决了这个问题。它基本上为svg添加了一个负的边距，从而隐藏了剪辑。我的台词出现在我的svg底部。当我添加下边距时，即使在调整页面大小时，这行也会消失。您的CSS规则可能看起来有所不同，但只要将其应用于SVG，剪辑就会消失。

svg {
width: 100%;
height: auto;
margin-bottom: -5px;  /* Adding this line fixed it */
}