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

Question

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

我尝试使用过滤器 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

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

p 元素中文本的颜色被反转，使得位于圆圈上方的部分具有青色。包含 p 和 svg 的元素的背景（在此片段的情况下，为正文）设置了白色背景，因此文本上的混合混合模式采用颜色差异（现在为 #00ffff = 青色）和白色 (#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>

Answer 2

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

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

Answer 4

我无法控制自己...当我有大量的事情时 - 我的意思是我可以做的其他事情堆积如山...我向光标添加了功能...不客气。

window.onload = function()
{
  document.addEventListener("mousemove", (event) => {
    let c = document.querySelector(".cursor");
    let ci = document.querySelector(".cursor__inner");
    let cx = ci.getAttribute("cx");
    let cy = ci.getAttribute("cy");
    c.style.setProperty("left", event.clientX - cx + "px");
    c.style.setProperty("top", event.clientY - cy + "px");
  });
}

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

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4