基于关键帧动画状态设置仪表盘SVG path元素不透明度的技术问询

实现逻辑 #

你的仪表盘指针旋转范围为0°~150°，共对应5条刻度线，每条刻度线对应30°的区间阈值，只需通过JS实时读取指针（.wrapper元素）的旋转角度，自动匹配对应刻度线设置不透明度即可，无需单独为每条线传参。

代码修改步骤 #

1. 给SVG刻度线添加统一类名 #

给所有<path>刻度线新增class="gauge-line"属性，方便批量选择操作，修改后的SVG代码如下：

<svg width="244" height="126" viewBox="0 0 244 126" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="236" height="122">
        <rect x="4.97656" width="234.175" height="122" fill="url(#paint0_linear)" />
    </mask>
    <g mask="url(#mask0)">
        <circle cx="122" cy="125.5" r="115" fill="url(#paint1_radial)" />
    </g>

    <path id="line1" class="gauge-line" opacity="0.5" d="M22.5763 57.2082C10.2411 75.2339 2.76131 96.7911 2 120.032" stroke="#75FCC6" stroke-width="4"
        stroke-linecap="round" />
    <path id="line2" class="gauge-line" opacity="0.5" d="M81.134 11.9933C59.6579 19.7007 41.0318 33.3096 27.248 50.8443" stroke="#75FCC6"
        stroke-width="4" stroke-linecap="round" />
    <path id="line3" class="gauge-line" opacity="0.5" d="M88.6836 9.56243C99.262 6.53918 110.44 4.91934 122 4.91934C133.56 4.91934 144.738 6.53919 155.317 9.56245"
        stroke="#979797" stroke-width="4" stroke-linecap="round" />
    <path id="line4" class="gauge-line" opacity="0.5" d="M162.867 11.9933C184.343 19.7007 202.969 33.3096 216.753 50.8443" stroke="#FBE850"
        stroke-width="4" stroke-linecap="round" />
    <path id="line5" class="gauge-line" opacity="0.5" d="M221.424 57.2082C233.759 75.2339 241.239 96.791 242 120.032" stroke="#FBE850" stroke-width="4"
        stroke-linecap="round" />

    <defs>
        <linearGradient id="paint0_linear" x1="122.064" y1="58.5794" x2="122.064" y2="122"
            gradientUnits="userSpaceOnUse">
            <stop />
            <stop offset="1" stop-opacity="0" />
        </linearGradient>
        <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
            gradientTransform="translate(122 125.5) rotate(90) scale(115)">
            <stop offset="0.765625" stop-color="#75FCC6" stop-opacity="0" />
            <stop offset="1" stop-color="#75FCC6" stop-opacity="0.33" />
        </radialGradient>
    </defs>
</svg>
<div class="indicator">
  <div class="wrapper">
    <div class="line"></div>
  </div>
</div>

2. 新增CSS过渡效果（可选） #

给刻度线添加过渡属性，让点亮效果更顺滑，修改CSS如下：

.indicator {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 45%;
  margin: 0 10px;

  @keyframes go {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(150deg);
    }
  }

  .wrapper {
    width: 100px;
    position: absolute;
    left: 1%;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards !important;
    transform-origin: bottom right;
    animation: go 2s ease-in;

    .line {
      display: inline-block;
      width: 85px;
      border-radius: 2px;
      border: 1px solid white;
      height: 0;
    }
  }
}

/* 新增刻度线过渡 */
.gauge-line {
  transition: opacity 0.3s ease;
}

3. 添加JS逻辑动态控制不透明度 #

封装通用函数，只需传入目标旋转角度，即可自动更新对应刻度线的不透明度：

// 刻度线对应角度阈值，按从左到右顺序排列
const lineAngleThresholds = [0, 30, 60, 90, 120];
const gaugeLines = document.querySelectorAll('.gauge-line');

function updateGaugeLines(rotateDeg) {
  // 角度取0-150范围内的有效值
  const validDeg = Math.max(0, Math.min(150, rotateDeg));
  gaugeLines.forEach((line, index) => {
    // 角度大于等于当前刻度对应阈值，点亮（不透明度设为1），否则保持0.5
    line.style.opacity = validDeg >= lineAngleThresholds[index] ? 1 : 0.5;
  });
}

// 使用示例：
// 1. 指针动画结束后更新
document.querySelector('.wrapper').addEventListener('animationend', () => {
  updateGaugeLines(150); // 对应动画最终旋转150度
});
// 2. 自定义传入角度，比如30度
// updateGaugeLines(30);
// 3. 需要动态跟随指针转动的话，可以用requestAnimationFrame实时读取旋转角度更新

效果说明 #

调用updateGaugeLines函数时，只需传入.wrapper元素的实际旋转角度即可，程序会自动判断需要点亮的刻度线：

• 传入30deg：点亮line1
• 传入80deg：点亮line1、line2
• 传入150deg：所有5条线全部点亮

内容的提问来源于stack exchange，提问作者Sergiu Tonț