HTML中SVG光圈动画层级问题：让第6片叶片置于第1、2片下方

问题分析 #

你当前的光圈动画中，最后渲染的红色叶片（300deg）因为DOM默认堆叠顺序（后渲染元素层级更高），错误覆盖了前面的青色（0deg）和黑色（60deg）叶片。核心问题是没有手动控制叶片的堆叠层级，导致遮挡逻辑不符合物理规律。

最佳解决方案：手动设置z-index控制堆叠层级 #

根据光圈叶片的遮挡逻辑，我们需要给每个叶片容器指定明确的z-index，让红色叶片处于更低的层级，被青色和黑色叶片覆盖。具体步骤：

• 在.blade-container的CSS中添加z-index属性，使用自定义变量--z-index来灵活控制
• 给每个叶片容器设置对应的--z-index值，确保红色叶片的层级低于需要遮挡它的叶片

修改后的完整代码 #

CSS 部分

:root {
  --aperture-size: 300px;
}

.aperture-wrapper {
  width: var(--aperture-size);
  height: var(--aperture-size);
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
}

.blade-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(var(--angle));
  transition: transform 1s ease;
  z-index: var(--z-index); /* 新增：用自定义变量控制堆叠层级 */
}

.blade {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform: translateY(20%);
  transition: transform 1s ease;
}

HTML 部分

<div class="aperture-wrapper">
  <!-- 青色叶片：层级最高 -->
  <div class="blade-container" style="--angle: 0deg; --z-index: 6">
    <svg class="blade" viewBox="-1 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <path d="M 0 0 C -1 3 -1 5 -1 5 C 1 6 5 6 5 6 C 1 3 0 0 0 0" fill="#00f9ff" stroke="#ffffff" stroke-width="0.05"/>
    </svg>
  </div>
  <!-- 黑色叶片：层级次高 -->
  <div class="blade-container" style="--angle: 60deg; --z-index: 5">
    <svg class="blade" viewBox="-1 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <path d="M 0 0 C -1 3 -1 5 -1 5 C 1 6 5 6 5 6 C 1 3 0 0 0 0" fill="#000000" stroke="#ffffff" stroke-width="0.05"/>
    </svg>
  </div>
  <div class="blade-container" style="--angle: 120deg; --z-index: 4">
    <svg class="blade" viewBox="-1 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <path d="M 0 0 C -1 3 -1 5 -1 5 C 1 6 5 6 5 6 C 1 3 0 0 0 0" fill="#c600ff" stroke="#ffffff" stroke-width="0.05"/>
    </svg>
  </div>
  <div class="blade-container" style="--angle: 180deg; --z-index: 3">
    <svg class="blade" viewBox="-1 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <path d="M 0 0 C -1 3 -1 5 -1 5 C 1 6 5 6 5 6 C 1 3 0 0 0 0" fill="#00a0ff" stroke="#ffffff" stroke-width="0.05"/>
    </svg>
  </div>
  <div class="blade-container" style="--angle: 240deg; --z-index: 2">
    <svg class="blade" viewBox="-1 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <path d="M 0 0 C -1 3 -1 5 -1 5 C 1 6 5 6 5 6 C 1 3 0 0 0 0" fill="#08ff00" stroke="#ffffff" stroke-width="0.05"/>
    </svg>
  </div>
  <!-- 红色叶片：层级最低，被前两片覆盖 -->
  <div class="blade-container" style="--angle: 300deg; --z-index: 1">
    <svg class="blade" viewBox="-1 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <path d="M 0 0 C -1 3 -1 5 -1 5 C 1 6 5 6 5 6 C 1 3 0 0 0 0" fill="#ff2d00" stroke="#ffffff" stroke-width="0.05"/>
    </svg>
  </div>
</div>

补充说明 #

• z-index值按遮挡需求设置：需要覆盖其他叶片的容器用更高数值，被覆盖的用更低数值
• 该方案完全兼容现有的translateY开合动画，不会影响原有功能
• 后续调整遮挡逻辑时，只需修改对应容器的--z-index值即可，无需改动DOM顺序

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