在Scroll上更改svg填充颜色

Question

如何在Scroll上更改SVG徽标的填充颜色；这可能与html或任何CSS属性一起使用吗？ 在另一个DIV上滚动时，颜色会改变

Answer 1

想法是在CSS中将mix-blend-mode: difference与isolation: isolate;一起用于该组。 由您决定如何移动图层。我为此使用输入类型范围。您可以使用滚动或滚轮。

我希望这会有所帮助。

percent.addEventListener("input",()=>{
  let val = ~~(percent.value);
  let _var = map(100-val,0,100,3,27);
  txt.textContent = val+"%";
  pth.setAttributeNS(null,"d",`M3,27H27V${_var}H3z`)
})

function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

svg{border:1px solid; font-size:10px; background:lightblue}
[type="range"]{width:150px;}

<svg viewBox="0 0 30 30" width="150">
  <g style="isolation: isolate;">
  <path d="M3,27H27V3H3z" fill="white" />
  <path id="pth" d="M3,27H27V15H3z"  />
  <text id="txt" x="15" y="15" dominant-baseline="middle" text-anchor="middle" fill="white" style="mix-blend-mode: difference;">50%</text>
  </g>
</svg>


<p><input id="percent" type="range" value="50" /></p>