带有 SVG 背景的 DIV 不会完全覆盖父级

Question

因此，请查看以下代码，其中包含一个带有横幅的父 div，以及一个子 div，该子 div 是一个 SVG“覆盖”背景。可以看到overlay并没有完全覆盖parent，左右两边有一个小缝隙。

.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440.5 82'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1440.5,0q-360,82-720,82T.5,0L0,81.5H1440Z' style='fill:%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center bottom no-repeat;
     top: 0;
}

<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

但是，下面的第二个代码示例将 SVG 替换为 PNG，并且效果很好。

.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaEAAABSCAMAAAB63uhxAAAC2VBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8Xe6ihAAAA8nRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCorLC0vMDEyMzQ1Njc4Ojs8PT4/QEFCQ0RFRkdISUpMTU5PUFFSVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6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') center bottom no-repeat;
     top: 0;
}

<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

显而易见的解决方案是，使用 PNG 版本。然而，这主要是一个学术问题 - 我想弄清楚为什么 SVG 版本不起作用 - 但它也很实用，因为给定图像的 SVG 版本通常可以小得多，就像这里的情况一样。

Answer 1

原因是纵横比不兼容。

您的 SVG 的纵横比（来自 viewBox）为：

1440.5/82 ~= 17.5671

当它尝试将其缩小到您的 div (934px) 的宽度时，它得到的计算大小为：

width:  934
height: 934 / (1440.5 / 82) ~= 53.1677 px 

它将四舍五入到 53，并将 SVG 渲染为中间位图：934px x 53px

但是 SVG viewBox 再次发挥作用，因为它希望在渲染 SVG 时保持纵横比正确。因此，由于渲染的高度小于 53.167px，宽度也将是一样的。最终将达到大约 (934 * (53/53.1677)) ~= 931px。

您可以通过以下方式缓解这些问题：

1. 使用四舍五入到整个单位的 viewBox 和路径坐标
2. 指定一个background-size，它不会导致宽度缩小到931。例如。 934px 54px。

.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 82'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1440,0q-360,82-720,82T0,0L0,82H1440Z' style='fill:%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center bottom no-repeat;
     top: 0;
     background-size: 934px 54px;
}

<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

这似乎在 Firefox 上完美运行，但在 Chrome 的右侧仍然有一个条子。可能是由于某种舍入误差。

解决这个问题的终极和最简单的方法是让您的路径在viewBox 之外绘制几个像素，以便始终将路径至少绘制到外部边界。

例如，让我们让路径从 -2 到 1442，而不是 0 到 1440。

.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 82'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1442,0q-360,82-720,82T-2,0L0,82H1442Z' style='fill:%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center bottom no-repeat;
     top: 0;
     background-size: 934px 54px;
}

<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

Answer 2

您可以使用svg 本身而不是div.HeroImage-Arc：

.HeroImage {
     position: relative;
     width: 934px;
}
svg {
     position: absolute;
     width: 100%;
     bottom: 0;
}

<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <svg viewBox="0 0 1440.5 82"><path fill="#fff" d="M1440.5 0q-360 82-720 82T0 0L0 81.5h1440.5z"/></svg>
</section>