Básicamente, quiero que el círculo invierta el color cuando el control deslizante lo mueva por la bandera (verde cuando esté sobre fondo blanco, blanco cuando esté sobre un rectángulo verde).
function move() { let slider = document.querySelector("#slider"); let circle = document.querySelector("#player"); circle.setAttribute("cx", slider.value); } <h1>Flag</h1> <svg width="375" height="375"> <g id="flag"> <rect x="0" y="0" width="125" height="375" fill="green"/> <rect x="250" y="0" width="125" height="375" fill="green"/> </g> <circle id="player" cx="187.5" cy="187.5" r="10" fill="green" /> </svg><br> <input id="slider" type="range" min="0" max="375" value="150" style="width:370px" oninput="move()">No hay una manera fácil de hacer esto con filtros SVG o modos de fusión, etc. Probablemente tenga que hacer el cambio usted mismo. Vea abajo.
function move() { let slider = document.querySelector("#slider"); let circle = document.querySelector("#player"); circle.setAttribute("cx", slider.value); circle.setAttribute('fill', (slider.value >= 125 && slider.value < 250) ? 'green' : 'white'); } <h1>Flag</h1> <svg width="375" height="375"> <g id="flag"> <rect x="0" y="0" width="125" height="375" fill="green"/> <rect x="250" y="0" width="125" height="375" fill="green"/> </g> <circle id="player" cx="187.5" cy="187.5" r="10" fill="green"/> </svg><br> <input id="slider" type="range" min="0" max="375" value="150" style="width:370px" oninput="move()">