我正在使用 svg 文件和一些 processing.js 代码来创建主页。 它有一些动画和静态元素，但想法是让一切都相同但颜色不同——就像一个替代主页。我希望这种替代方案能够在鼠标四处移动时“窥视”。只有鼠标周围的一小块区域。
有人知道怎么做吗？ 因为它不是图像文件，所以有点棘手。
我尝试通过使用图像和 processing.js 的“绘图”元素来做到这一点，认为它可以绘制替代主页，但是它会在鼠标所到之处重复图像，而我想要的是将所有内容保留在相同的位置只显示该位置的不同颜色。
最佳答案
您可以考虑叠加网站的两个版本，“顶部”版本完全覆盖“底部”版本(确保所有背景都是不透明的)。然后，您可以尝试将 SVG 蒙版应用于首页，使其在特定区域透明并使底部页面发光。您可以随着鼠标的移动修改 mask 。
相反的方式 - 即剪裁顶层 - 也是可以考虑的。
我看到这种方法很慢并且跨浏览器不一致的风险 - 你必须试一试。速度可能会有所不同，具体取决于您是剪辑/ mask 顶层还是底层。
- > W3C SVG Clipping, Masking and Compositing specs
- > MDN page on clipping and masking
- > MDN page on applying SVG effects to HTML content
如果页面的一个版本可以通过换出颜色转换为其他版本，SVG filters也可能是一个选择。
关于javascript - 仅在鼠标周围显示叠加对象，无论在屏幕的哪个位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37626763/