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

【问题标题】：CSS Invert colors in transparent svg elementCSS反转透明svg元素中的颜色
【发布时间】：2021-09-20 18:06:02
【问题描述】：

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

我尝试使用过滤器 invert(1) 将 .cursor__inner 的填充设置为透明（正如您在代码 sn-p 上看到的那样），但它不起作用。

.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 的解决方案。

【问题讨论】：

反转透明度不会产生黑色（与白色相反），因为它不会反转 Alpha 通道（不透明度）部分。您能否再描述一下您的约束是什么——您可以控制什么，您无法控制什么？例如有什么理由不能让透明度变成白色吗？你能改变任何 CSS/HTML/SVG 吗？
我可以更改 CSS 和 HTML。
我也可以更改 SVG，但我宁愿不更改 SVG。
那么为什么不为 SVG 设置 fill=black 为 p 设置 color:cyan 呢？反转的意义是什么？
因为，在我的网站上有更多颜色（红色只是示例）。查看我的更新 - 我添加了图片。

标签： javascript html css svg

【解决方案1】：

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

p 元素中文本的颜色被反转，因此位于圆圈上方的部分具有青色。包含 p 和 svg 的元素的背景（在这个 sn-p 的例子中是 body）的背景设置为白色，因此文本上的 mix-blend-mode 采用颜色的差异（现在是 #00ffff =青色）和白色（#ffffff）带我们回到红色（#ff0000）。

如 cmets 中所述，无法反转 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>

【讨论】：

什么是允许的？你必须做一些事情来阻止圆圈变得透明。如果需要，不同的类当然可以为不同的实例设置不同的颜色。问题是因为您需要多个版本吗？

【解决方案2】：

像这样？透明反转是透明的，所以我将填充设置为白色。和过滤器：反转使用％。
过滤器：反转（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>

【讨论】：

不，我不想要这个。查看我的最后一次编辑 - 我添加了图像。

【解决方案3】：

尝试遵循这个。

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

【讨论】：

不，我不想要这个。查看我的最后一次编辑 - 我添加了图像。