时间戳

首页 > 解决方案 > 如何使用javascript根据背景颜色更改圆形填充？

javascript - 如何使用javascript根据背景颜色更改圆形填充？

问题描述

基本上我希望圆圈在滑块移动它穿过标志时反转颜色（在白色背景上为绿色，在绿色矩形上为白色）。

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()">

标签： javascripthtmlsvg

解决方案

使用 SVG 过滤器或混合模式等没有一种简单的方法可以做到这一点。您可能必须自己进行切换。见下文。

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()">

推荐阅读