如何调整浏览器光标层级使其渲染在半透明SVG下方？

浏览器的默认系统光标（比如箭头、手型这类）属于操作系统层面的渲染元素，不属于DOM的z-index层级体系，没法直接通过CSS调整它的层级让它跑到SVG下面。不过可以用两种替代方案实现类似效果：

方案1：用自定义光标替代原生光标 #

1. 先隐藏原生光标：给页面根元素添加CSS：

html {
  cursor: none; /* 隐藏原生光标 */
}

2. 在SVG下方的内容容器上设置自定义光标，这样自定义光标会被上层的SVG覆盖：

.content-container {
  cursor: url('你的自定义光标图片路径'), auto; /* 自定义光标，fallback为默认样式 */
}

注意自定义光标图片要符合浏览器要求（比如尺寸不宜过大，支持png、svg等格式）。

方案2：用DOM元素模拟光标 #

1. 给覆盖整个页面的SVG设置固定定位和高z-index：

.fullscreen-svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10; /* 确保SVG在最上层 */
  pointer-events: none; /* 如果不需要SVG拦截鼠标事件，加上这个 */
}

2. 创建一个模拟光标的DOM元素，设置更低的z-index，让它在SVG下方：

<div class="custom-cursor"></div>

.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000; /* 模拟光标样式，可自定义 */
  z-index: 5; /* 比SVG的z-index小，确保在下方 */
  pointer-events: none; /* 不拦截鼠标事件 */
  transform: translate(-50%, -50%); /* 让元素中心对齐鼠标位置 */
}

3. 用JavaScript监听鼠标移动事件，实时更新模拟光标的位置：

const cursor = document.querySelector('.custom-cursor');
document.addEventListener('mousemove', (e) => {
  cursor.style.left = `${e.clientX}px`;
  cursor.style.top = `${e.clientY}px`;
});

这种方式可以完全自定义光标样式，且能确保它在SVG下方渲染。

内容的提问来源于stack exchange，提问作者Grant Moore