SVG 下方出现空间（仅在 Google Chrome 中）答案

【问题标题】：Space appearing beneath SVG (only in Google Chrome)SVG 下方出现空间（仅在 Google Chrome 中）
【发布时间】：2017-05-23 07:28:15
【问题描述】：

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

这些在除 Chrome 之外的所有浏览器中都能完美运行，在某些浏览器宽度下，它们的高度似乎会略微降低，并在下方留下一个小空白。

你可以明白我的意思here。

我已按照this question 的建议指定宽度、最大宽度、高度和最大高度，但没有成功。

关于为什么会发生这种情况以及如何解决的任何想法？

提前致谢，

汤姆

编辑：这是一个屏幕截图来说明我的意思。紫色曲线的顶部边缘不应有细白线：

【问题讨论】：

一定是我蹩脚的显示器？我在页面中看不到您的意思？您能否截取放大的屏幕截图或在您看到问题的地方添加#anchor？我在 Chrome 中制作的 svg 出现了一个非常小的边缘问题，我在元素上画了一个小笔触（不确定这是否对您的特定问题有帮助）？
当然，已添加屏幕截图。遗憾的是，中风出现在白色间隙下方，因此无法解决问题。 SVG 是通过 CSS 添加的，您认为添加 HTML 会有所不同吗？
对于它的价值：我检查了 chrome 中的网页，没有看到这条白线。编辑：当我缩放时它会显示出来。 110%、125%、150% 和 200%（不是 175%）。
感谢 Philipp，您是否尝试过减小浏览器窗口的宽度？这条线不会以特定大小出现，然后随着窗口变窄而增长，到达一个点然后再次消失。
@TomPerkins 啊，是的，我调整的大小不够。即使在标准缩放下，我现在也能看到这条线。

标签： css google-chrome svg

【解决方案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;

【讨论】：

添加 background-position:center calc(100% + 2px);辛苦了，谢谢克里。这会被所有浏览器接受还是我应该提供某种回退？
不用担心。我觉得应该挺甜的。 caniuse.com/calc/embed 我也喜欢 SVG。
我的错。其实只是再想想而已。我认为我们根本不需要计算 background-position:center 2px;相同的价值，浏览器的工作量更少。