仅在鼠标周围显示叠加对象，无论在屏幕的哪个位置
show overlay objects only around the mouse not matter where in the screen
我正在使用 svg 文件和一些 processing.js 代码来创建主页。
它有一些动画和静态元素，但想法是让一切都相同但颜色不同——就像一个替代主页。当鼠标四处移动时，我希望这个 "peek" 的替代方法。只有鼠标周围的一小块区域。
有人知道怎么做吗？
因为它不是图像文件，所以有点棘手。
我尝试使用图像和 processing.js 的 "drawing" 元素来实现它，认为它可以绘制替代主页，但是它会在鼠标所到之处重复图像，而我想要的是为了让所有东西都保持在相同的位置，只会在那个地方显示不同的颜色。
您可以考虑叠加网站的两个版本，"top" 一个完全覆盖 "bottom" 一个（确保所有背景都是不透明的）。然后，您可以尝试将 SVG 蒙版应用于首页，使其在特定区域透明并使底部页面发光。您可以随着鼠标移动修改遮罩。
反之亦然——即剪裁顶层——也是可以考虑的。
我看到这种方法很慢并且跨浏览器不一致的风险 - 你必须试一试。速度可能会有所不同，具体取决于您 clip/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 也可能是一个选项。
我正在使用 svg 文件和一些 processing.js 代码来创建主页。 它有一些动画和静态元素，但想法是让一切都相同但颜色不同——就像一个替代主页。当鼠标四处移动时，我希望这个 "peek" 的替代方法。只有鼠标周围的一小块区域。
有人知道怎么做吗？ 因为它不是图像文件，所以有点棘手。
我尝试使用图像和 processing.js 的 "drawing" 元素来实现它，认为它可以绘制替代主页，但是它会在鼠标所到之处重复图像，而我想要的是为了让所有东西都保持在相同的位置，只会在那个地方显示不同的颜色。
您可以考虑叠加网站的两个版本，"top" 一个完全覆盖 "bottom" 一个（确保所有背景都是不透明的）。然后，您可以尝试将 SVG 蒙版应用于首页，使其在特定区域透明并使底部页面发光。您可以随着鼠标移动修改遮罩。
反之亦然——即剪裁顶层——也是可以考虑的。
我看到这种方法很慢并且跨浏览器不一致的风险 - 你必须试一试。速度可能会有所不同，具体取决于您 clip/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 也可能是一个选项。