如何绝对定位<SVG>元素且避免出现Overflow问题

核心思路 #

通过容器的overflow: hidden实现Blob图形的截断效果，配合绝对定位控制SVG/图形的位置，同时确保SVG尺寸足够覆盖所需区域，避免定位时出现尺寸异常。

步骤1：容器基础设置 #

给包裹SVG的父容器添加以下样式，这是实现截断的关键：

.portfolio-container {
  position: relative; /* 为绝对定位的SVG提供参考 */
  width: 100vw; /* 按需设置，比如占满视口或固定宽度 */
  height: 100vh; /* 按需设置 */
  overflow: hidden; /* 裁剪超出容器的Blob部分 */
  border: 2px solid #222; /* 你的div边框样式 */
}

步骤2：SVG定位与尺寸控制 #

方案A：单个SVG包含两个Blob路径

用transform直接控制路径位置，无需多个SVG标签，更简洁：

<div class="portfolio-container">
  <svg class="blob-wrapper" viewBox="0 0 1000 1000">
    <!-- 左上角Blob -->
    <path class="blob-top-left" 
          d="M0,500Q150,300,300,400T600,350Q750,500,600,650T300,600Q150,700,0,500Z" 
          fill="#88d8b0"/>
    <!-- 右下角Blob -->
    <path class="blob-bottom-right" 
          d="M1000,500Q850,700,700,600T400,650Q250,500,400,350T700,400Q850,300,1000,500Z" 
          fill="#ff6b6b"/>
  </svg>
  <!-- 你的作品集内容放在这里 -->
</div>

对应的CSS：

.blob-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blob-top-left {
  transform: translate(-25%, -25%); /* 让部分图形超出容器，被overflow裁剪 */
}

.blob-bottom-right {
  transform: translate(25%, 25%);
}

方案B：两个独立SVG标签

适合需要分别控制SVG尺寸的场景：

<div class="portfolio-container">
  <svg class="blob-top-left" viewBox="0 0 1000 1000">
    <path d="M0,500Q150,300,300,400T600,350Q750,500,600,650T300,600Q150,700,0,500Z" fill="#88d8b0"/>
  </svg>
  <svg class="blob-bottom-right" viewBox="0 0 1000 1000">
    <path d="M1000,500Q850,700,700,600T400,650Q250,500,400,350T700,400Q850,300,1000,500Z" fill="#ff6b6b"/>
  </svg>
  <!-- 你的作品集内容 -->
</div>

对应的CSS：

.blob-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
  margin-top: -20%;
  margin-left: -20%; /* 负margin让图形超出容器 */
}

.blob-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 60%;
  margin-bottom: -20%;
  margin-right: -20%;
}

关键注意事项 #

• 必须给容器设置overflow: hidden，否则超出的Blob部分不会被截断。
• SVG的viewBox属性要正确设置，确保图形缩放时不会变形，无需给SVG写固定的width/height属性，用CSS控制即可。
• 调整transform或margin的百分比/数值，可以精确控制Blob被截断的范围，匹配你的目标效果。

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