绝对定位SVG溢出隐藏问题：如何隐藏阴影容器外的圆形部分

问题根源 #

你的.bg元素用了position: absolute，但父容器.container没设置position: relative——这会导致.bg是相对于视口（而非.container）定位的，完全脱离了容器的文档流范围。这种情况下，.container的overflow: hidden自然无法对它生效，溢出部分也就不会被裁剪。

修复方案 #

只需要给.container加上position: relative，让.bg的绝对定位基准变成.container，容器的overflow: hidden就能正常工作了。

修改后的CSS代码：

body { overflow: hidden; }
.container { 
  margin-top: 5%; 
  width: 1200px; 
  height: 625px; 
  border-radius: 4px; 
  background-color: #fff; 
  overflow: hidden; 
  position: relative; /* 新增这一行，关键修复 */
}
.bg { 
  position: absolute; 
  display: inline-block; 
  right: 10px; 
  top: 20px; 
  width: 30vw; 
  height: 30vw; 
  overflow: hidden; 
}

额外注意点 #

• 添加position: relative后，.bg的right/top定位是相对于.container的，可能需要微调数值来匹配你想要的位置。
• 可以检查下SVG的viewBox属性是否正确，确保SVG的渲染尺寸和.bg容器匹配，避免额外的溢出问题。

内容的提问来源于stack exchange，提问作者Gu Zhao