SVG 形状分隔器的对齐问题

Question

我正在尝试用我自己的SVG复制如此流行的形状分隔线。

我在Illustrator中创建了一个SVG，在Inkscape中创建了一个类似的版本。两者都有相同的问题与底部对齐：它与以下div 之间存在微小的差距。

差距示例

这种行为是我的SVG独有的，我在互联网上找到的其他人没有这个问题。

该部分的边距设置为 0，更改 #section-2-55348 svg 的 CSS 高度会更改间隙的大小。

#section-2-55348 {
position: relative;
overflow: hidden;
}
#section-2-55348 svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
fill: #003767;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path  d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>

Answer 1

在下一个示例中，svg{display:block;}有所不同。我希望这是你需要的。

*{margin:0; padding:0;}
svg{fill: #003767;display:block;}
div{background:#003767;min-height:5em;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path  d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>
<div></div>

Answer 2

不太确定这里发生了什么，但我有一个可能对你有帮助的解决方法。它不是很优雅，但您可以在svg上设置负边距。我建议您为您的 SVG 提供一个 ID，以便此边距不会应用于页面上的其他 SVG。

svg#my-svg-id {
margin: -5px;
}

这有点笨拙，但由于我不完全确定页面其余部分的代码是什么样子的，这是我能想到的最佳选择。