SVG下方出现的空间（仅限Google Chrome）

Question

我正在构建一个网站，其中包含许多使用SVG创建的曲线。

除了Chrome之外，它们在所有浏览器中都能很好地工作，在某些浏览器宽度下，它们的高度会略微降低，在下方留下一个小的空白区域。

你可以看到我的意思here。

我指定宽度，最大宽度，高度和最大高度为this question，但没有成功。

关于为什么会这样做以及如何解决的任何想法？

提前致谢，

汤姆

编辑： 这是截图，说明我的意思。紫色曲线沿顶边不应有细白线：

Answer 1

粗暴黑客。也许这个计算可以用101％来完成？

.homepage_intro_section.purple.dark_purple_below .curve
{ 
   background-position:center calc(100% + 2px);
}

.dark_purple .curve
{
    background-position: center -3px;
}

我认为您的bg路线也存在一些小问题（重复）？

.dark_purple .curve {
    background: url(../svg/extended-curve-purple-to-white.svg) center bottom no-repeat, none center no-repeat;