我的HTML中，我有一个透明的SVG圈。我需要在这个SVG圆圈上反转颜色，所以我将看到带有青色文本的黑色圆圈。

我尝试使用Filter Invert（1）将.cursor__inner的填充设置为透明（正如您在代码片段中看到的那样），但它不起作用。

.cursor {
  position: absolute;
  top: 0;
  left: 0;
}
.cursor__inner {
  fill: transparent;
  filter: invert(1);
}
p {
  color: red;
}

<代码><；SVG CLASS=“ cursor ” WIDTH=“ 64 ” HEIGHT=“ 64 ” VIEWBOX=“ 006464 ”>；<；CIRCLE CLASS=“光标__内部” cx=“ 32 ” cy=“ 32 ” R=" 32gt；/<；/SVG>；<；P>；世界你好！<；/p>；

我想做出这样的效果：

我更喜欢纯CSS的解决方案。

顺晟科技：

一种方法是接近问题中给出的代码。

颜色被反转，以便位于圆圈上的部分具有青色。包含P和SVG的元素的背景（在这个片段中，是主体）设置为白色背景，因此文本上的混合模式采用颜色（现在是#00FFFF=青色）和白色（#FFFFFF）的差异，将我们带回红色（#FF0000）。

正如注释中所提到的，不可能反转SVG圆形颜色，因为它具有透明度，所以无论它反转了什么RGB，它都会被填充为纯色。

<代码>正文{背景：白色；高度：100VH；}.光标{位置：绝对；顶部：0；左：0；}.cursor__内部{填充：黑色；}P{颜色：青色；颜色：红色；滤波器：反转（1）；Mix-Blend-Mode：区别；}

<代码><；身体>；<；SVG CLASS=“ cursor ” WIDTH=“ 64 ” HEIGHT=“ 64 ” VIEWBOX=“ 006464 ”>；<；CIRCLE CLASS=“游标__内部” cx=“ 32 ” cy=“ 32 ” R=“ 31 ”/>；<；/SVG>；<；P>；世界你好！<；/p>；<；/正文>；

像这样？透明反转是透明的，所以我将“填充”设置为白色。和筛选：反转使用%。过滤器：反转（1）<；-错误过滤器：反转（100%）<；-右

<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>

<代码><；SVG CLASS=“ Cursor Invert ” width=“ 64 ” height=“ 64 ” viewbox=“ 006464 ”>；<；CIRCLE CLASS=“光标__内部” cx=“ 32 ” cy=“ 32 ” R=" 32gt；/<；/SVG>；<；p CLASS=“ INVERT ”>；世界你好！<；/p>；

试着跟着这个。

body {
  background: white;
  height: 100vh;
}

.cursor {
  position: absolute;
  top: 0;
  left: 0;
}

.cursor__inner {
  fill: black;
}

p {
  color: cyan;
  color: red;
  filter: invert(1);
  mix-blend-mode: difference;
}

<代码><；SVG CLASS=“ cursor ” WIDTH=“ 64 ” HEIGHT=“ 64 ” VIEWBOX=“ 006464 ”>；<；CIRCLE CLASS=“游标__内部” cx=“ 32 ” cy=“ 32 ” R=“ 31 ”/>；<；/SVG>；<；P>；世界你好！<；/p>；