时间戳

首页 > 解决方案 > CSS反转透明svg元素中的颜色

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

问题描述

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

我尝试.cursor__inner使用 filter invert(1) 将 'fill 设置为透明（正如您在代码片段中看到的那样），但它不起作用。

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

标签： javascripthtmlcsssvg

解决方案

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

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>

推荐阅读