如何用纯CSS为透明SVG圆形元素实现颜色反转效果

问题根源 #

原方案不生效的核心原因是：filter: invert() 作用于元素自身的绘制内容，你给圆形设置了fill: transparent，元素自身没有可渲染的不透明像素，滤镜自然没有生效载体。

纯CSS实现方案 #

使用backdrop-filter属性替代普通filter即可，该属性会对元素覆盖区域下方的所有背景内容生效，正好匹配「圆形覆盖区域整体颜色反转」的需求：白色背景反转后为黑色，红色文字反转后为青色，完全符合预期效果。
修改后的完整代码如下：

.cursor {
  position: absolute;
  top: 0;
  left: 0;
  /* 提高层级确保SVG覆盖在文字上方 */
  z-index: 10;
}
.cursor__inner {
  fill: transparent;
  /* 对覆盖区域的背景内容做颜色反转 */
  backdrop-filter: invert(1);
}
p {
  color: red;
}

<svg class="cursor" width="64" height="64" viewBox="0 0 64 64">
  <circle class="cursor__inner" cx="32" cy="32" r="32" />
</svg>
<p>Hello World!</p>

兼容备选方案 #

如果需要适配不支持backdrop-filter的旧版本浏览器，也可以用mix-blend-mode: difference配合白色填充的圆形实现同等效果，修改cursor__inner的样式即可：

.cursor__inner {
  fill: #fff;
  mix-blend-mode: difference;
}

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