Изменить цвет заливки svg на Scroll

Question

Как я могу изменить цвет заливки логотипа SVG на Scroll;¿Это возможно с помощью HTML или какого-либо свойства CSS?Цвет меняется при прокрутке при другой DIV

Answer 1

Идея состоит в том, чтобы использовать mix-blend-mode: difference в CSS вместе с 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>