Html SVG背景的DIV获胜'；不能完全覆盖父母

因此，请查看下面的代码，其中包含一个带有横幅的父div，以及一个子div，该子div意味着它是一个SVG“overlay”背景。您可以看到，覆盖层没有完全覆盖父对象，左右两侧有一个小间隙

.heroMage{
位置：相对位置；
宽度：934px；
}
.法师弧{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：url（“数据：image/svg+xml；charset=utf8，%3Csvg xmlns=”http://www.w3.org/2000/svg“viewBox='0 1440.5 82'%3E%3Cg%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%3E%3C/svg%3E'）中心底部不重复；
排名：0；
}

---

您可以使用

svg

本身，而不是

div.herograge-Arc

：

.heroMage{
位置：相对位置；
宽度：934px；
}
svg{
位置：绝对位置；
宽度：100%；
底部：0；
}

---

您可以使用

svg

本身，而不是

div.herograge-Arc

：

.heroMage{
位置：相对位置；
宽度：934px；
}
svg{
位置：绝对位置；
宽度：100%；
底部：0；
}

---

原因是纵横比不兼容

SVG的纵横比（从viewBox）为：

当它尝试将其缩小到

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处结束

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

使用取整为整单位的视口和路径坐标

指定不会导致宽度缩小到931的

背景大小。例如，
934px 54px

.heroMage{
位置：相对位置；
宽度：934px；
}
.法师弧{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：url（“数据：image/svg+xml；charset=utf8，%3Csvg xmlns=”http://www.w3.org/2000/svg“viewBox='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'）中心底部不重复；
排名：0；
背景尺寸：934px4px；
}

---

原因是纵横比不兼容

SVG的纵横比（从viewBox）为：

当它尝试将其缩小到

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处结束

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

使用取整为整单位的视口和路径坐标

指定不会导致宽度缩小到931的

背景大小。例如，
934px 54px

.heroMage{
位置：相对位置；
宽度：934px；
}
.法师弧{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：url（“数据：image/svg+xml；charset=utf8，%3Csvg xmlns=”http://www.w3.org/2000/svg“viewBox='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'）中心底部不重复；
排名：0；
背景尺寸：934px4px；
}

感谢您提供了这一出色且内容丰富的答案。我学到了一些新的东西。谢谢你给我这个精彩而翔实的答案。我学到了一些新东西。