Question

因此，请检查以下代码，其中包含一个带有banner的父div和一个子div，该子div的内部应为SVG“覆盖”背景。您会看到覆盖层没有完全覆盖父对象，左右两侧之间有一个小缝隙。

.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的宽度（934像素）时，其计算得出的大小为：

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

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

但是SVG viewBox再次发挥作用，因为它希望在渲染SVG时保持正确的宽高比。因此，由于渲染的高度小于53.167像素，因此宽度也是如此。最终将约为（934 *（53 / 53.1677））〜= 931px。

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

使用舍入为整个单位的viewBox和路径坐标
指定不会导致宽度缩小到931的background-size。 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>

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

2 个答案: