overflow:hidden错误裁剪SVG遮罩问题求助

我正在制作一款可修改连帽衫颜色的头像，当给容器设置overflow:hidden使内容适配圆形容器时，SVG遮罩出现了错误裁剪的情况：

• overflow:none效果：
  
• overflow:hidden效果：
  

恳请开发者指出问题所在，或提供实现需求的替代方案。相关代码如下：

CSS代码 #

.memoji-wrap {
  width: 80px;
  height: 80px;
  background: #f6f6f6;
  border-radius: 50%;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

#memoji-container {
  position: relative;
  width: 60px;
  left: 3px;
  top: 5px;
}

#product-svg {
  position: relative;
  z-index: 2;
  mix-blend-mode: multiply;
}

#product-shape {
  fill: #dbed64;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

HTML代码 #

<div class="memoji-wrap">
      <div id="memoji-container">
        <svg
          id="product-svg"
          data-name="Layer 1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 109.67 125.67"
        >
          <path
            id="product-shape"
            class="cls-1"
            d="m.2,125.5l.39-8.68.35-10.82.32-7.02s.32-2.74.74-4.04,1.51-3.72,1.51-3.72l3.16-3.65v-.35l-.67-.74.49-1.51s1.9-2.67,2.04-3.51.63-2.18.63-2.18l1.72-2.14,3.27-2.11,4.39-2.18,2.07-.56,2.56.77.18.25v3.41s7.76,7.83,9.55,8.78,3.23,1.05,3.23,1.05c0,0,3.27-.18,4.14-.84s.95-1.93.95-1.93c0,0,.46-2.04.49-2.6s.35-2.63.35-2.63l.28-2.21v-2.56s-.42.25-.74-.21.32-.91.32-.91c0,0,7.99-3.67,9.95-6.95,0,0,1.01-.14,1.12,0s0,1.4,0,1.4c0,0,5.57-.64,6.59-.44,0,0,4.17,1.46,5.34,2.6s15.17,13.92,15.17,13.92c0,0-1.63-16.16-.38-17.01s1.55-1.55,1.55-1.55v-8.31s.23-.29.47-.29h13.22s.58,7.67,1.05,7.79,2.28,1.98,2.92,3.38,1.17,4.11,1.17,4.11l1.34,8.87.38,6.62s.96,13.25.93,14.59-.5,4.81-.73,5.16-1.6,4.43-4.49,6.24-7.96,1.23-7.96,1.23c0,0-4.46-1.49-5.72-2.28s-13.19-11.03-13.19-11.03c0,0-4.35-4.03-5.34-4.73s-1.05-.96-1.05-.96c0,0-.76-.12-1.11.12s-.79.7-.79.7l-.15,4.35s.82,6.94.99,7.5,1.02,10.18.9,10.47.61,7.53.61,7.53l-64.53-.17Z"
          />
        </svg>
        <img id="background-image" src="img/IMG_Mem.png" alt="" />
      </div>
    </div>

问题分析 #

问题根源在于SVG的viewBox尺寸远大于容器#memoji-container的60px宽度，外层.memoji-wrap设置overflow:hidden后，会裁剪超出其80x80范围的内容。但SVG本身的实际渲染区域（基于viewBox）比容器大，导致遮罩的部分内容被裁剪，同时mix-blend-mode: multiply的叠加效果也会因裁剪出现异常。

解决方案 #

1. 调整SVG尺寸与容器匹配 #

给#product-svg添加宽高样式，让它和容器尺寸完全对齐，避免超出裁剪范围：

#product-svg {
  position: relative;
  z-index: 2;
  mix-blend-mode: multiply;
  width: 100%; /* 匹配容器宽度 */
  height: auto; /* 保持原始比例 */
}

同时优化#memoji-container的定位，确保SVG和背景图对齐：

#memoji-container {
  position: relative;
  width: 60px;
  margin: 0 auto; /* 替代left/top，居中对齐 */
}

2. 用clip-path替代overflow:hidden #

如果调整尺寸后仍有问题，可给.memoji-wrap添加clip-path: circle(50%)替代overflow:hidden，这种方式对SVG和混合模式的兼容性更好：

.memoji-wrap {
  width: 80px;
  height: 80px;
  background: #f6f6f6;
  border-radius: 50%;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* overflow: hidden; */
  clip-path: circle(50%); /* 用clip-path实现圆形裁剪 */
}

替代方案：将背景图整合到SVG中 #

直接把头像图片作为SVG的<image>元素嵌入，用<clipPath>实现遮罩效果，完全在SVG内处理颜色和遮罩，从根源避免裁剪问题：

<svg id="product-svg" viewBox="0 0 109.67 125.67" width="60px" height="auto">
  <defs>
    <clipPath id="hoodie-clip">
      <path d="m.2,125.5l.39-8.68.35-10.82.32-7.02s.32-2.74.74-4.04,1.51-3.72,1.51-3.72l3.16-3.65v-.35l-.67-.74.49-1.51s1.9-2.67,2.04-3.51.63-2.18.63-2.18l1.72-2.14,3.27-2.11,4.39-2.18,2.07-.56,2.56.77.18.25v3.41s7.76,7.83,9.55,8.78,3.23,1.05,3.23,1.05c0,0,3.27-.18,4.14-.84s.95-1.93.95-1.93c0,0,.46-2.04.49-2.6s.35-2.63.35-2.63l.28-2.21v-2.56s-.42.25-.74-.21.32-.91.32-.91c0,0,7.99-3.67,9.95-6.95,0,0,1.01-.14,1.12,0s0,1.4,0,1.4c0,0,5.57-.64,6.59-.44,0,0,4.17,1.46,5.34,2.6s15.17,13.92,15.17,13.92c0,0-1.63-16.16-.38-17.01s1.55-1.55,1.55-1.55v-8.31s.23-.29.47-.29h13.22s.58,7.67,1.05,7.79,2.28,1.98,2.92,3.38,1.17,4.11,1.17,4.11l1.34,8.87.38,6.62s.96,13.25.93,14.59-.5,4.81-.73,5.16-1.6,4.43-4.49,6.24-7.96,1.23-7.96,1.23c0,0-4.46-1.49-5.72-2.28s-13.19-11.03-13.19-11.03c0,0-4.35-4.03-5.34-4.73s-1.05-.96-1.05-.96c0,0-.76-.12-1.11.12s-.79.7-.79.7l-.15,4.35s.82,6.94.99,7.5,1.02,10.18.9,10.47.61,7.53.61,7.53l-64.53-.17Z"/>
    </clipPath>
  </defs>
  <!-- 背景头像 -->
  <image href="img/IMG_Mem.png" width="109.67" height="125.67"/>
  <!-- 遮罩后的连帽衫 -->
  <g clip-path="url(#hoodie-clip)">
    <rect width="109.67" height="125.67" fill="#dbed64"/>
  </g>
</svg>

简化后的HTML：

<div class="memoji-wrap">
  <svg id="product-svg" viewBox="0 0 109.67 125.67" width="60px" height="auto">
    <!-- 上述SVG内容 -->
  </svg>
</div>

这种方式修改连帽衫颜色只需改变<rect>的fill值即可，完全没有裁剪和层级问题。

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