CSS 反转透明 svg 元素中的颜色

Question

在我的 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="0 0 64 64">
  <circle class="cursor__inner" cx="32" cy="32" r="32" />
</svg>
<p>Hello World!</p>

我想做这个效果：

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

Answer 1

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

.cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.cursor__inner {
  fill: white;
  z-index: -1;
}
p {
  color: red;
  z-index: 100;
}
.invert {
filter: invert(100%);
}

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

Answer 2

试着按照这个。

.cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.cursor__inner {
  fill: white;
  filter: invert(100%);
}
p {
  color: red;
  filter: invert(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>

Answer 3

实现所需结果的一种方法是接近问题中给出的代码。

p 元素中文本的颜色是反转的，因此位于圆圈上方的部分为青色。包含 p 和 svg 的元素的背景（在这个片段的例子中，正文）设置了白色背景，所以文本上的 mix-blend-mode 会采用不同的颜色（现在是#00ffff = cyan）和白色 (#ffffff) 带我们回到红色 (#ff0000)。

如评论中所述，无法反转 SVG 圆圈颜色，因为它具有透明度，因此将始终具有它反转的任何 RGB，因此它会填充纯色。

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

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

CSS 反转透明 svg 元素中的颜色

CSS Invert colors in transparent svg element

html

javascript

css

svg