我正在使用svg文件和一些处理.js代码来创建主页。它有一些动画和静态元素，但想法是让一切都相同，但颜色不同 - 就像一个替代主页。我希望这个替代方案在鼠标移动时"偷看"。鼠标周围只有一小块区域。
有人知道如何做到这一点吗？由于它不是图像文件，因此有点棘手。
我尝试通过使用图像和处理的"绘图"元素来做到这一点.js认为它可以绘制替代主页，但是它会在鼠标走到的任何地方重复图像，我想要的是让所有内容都保持在同一位置只显示该位置的不同颜色。
您可以考虑叠加网站的两个版本，"顶部"版本完全覆盖"底部"版本（确保所有背景都不透明）。 然后，您可以尝试将 SVG 蒙版应用于首页，使其在特定区域透明并导致底部页面闪亮。 您可以在鼠标移动时修改蒙版。
反过来 - 即剪裁顶层 - 也是可以想象的。
我看到这种方法很慢并且在浏览器之间不一致的风险 - 您必须尝试一下。 速度可能会有所不同，具体取决于您是裁剪/遮罩顶层还是底层。
- W3C SVG 剪切、遮罩和合成规范
- 关于剪切和遮罩的 MDN 页面
- 关于将 SVG 效果应用于 HTML 内容的 MDN 页面
如果页面的一个版本可以通过交换颜色转换为另一个版本，则 SVG 过滤器也可能是一个选项。