CODEWITHSUNDEEP
javascripthtmlcsssvg
Jurakin
Jurakin

Reputation: 1084

CSS Invert colors in transparent svg element

in my html I have transparent svg circle. I need to invert colors on this svg circle, so I will see black circle with cyan text.

I tried to set .cursor__inner's fill to transparent with filter invert(1) (as you can see it on code snippet), but it didn't work.

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

I want to make this effect:

effect

I prefer solution with pure css.

Upvotes: 1

Views: 3845

Answers (4)

Shmack
Shmack

Reputation: 2311

I couldn't help myself... When I have loads of - and I mean mountains of anything else I could be doing... I added functionality to the cursor... You're welcome.

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>

Upvotes: 0

A Haworth
A Haworth

Reputation: 36426

One way of achieving the required result is close to the code given in the question.

The color of the text in the p element is inverted so that the part lying over the circle has the color cyan. The background of the element containing the p and svg (in this snippet's case, the body) has a background of white set so the mix-blend-mode on the text takes the difference of the color (which is now #00ffff = cyan) and white (#ffffff) to take us back to red (#ff0000).

As noted in comments, it's not possible to invert the SVG circle color as it has transparency so will always have that whatever RGB it has inverted so it's filled with a solid color.

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>

Upvotes: 3

Fc0001
Fc0001

Reputation: 118

Try to follow this.

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

Upvotes: 0

naxsi
naxsi

Reputation: 622

Like this? transparent inverted is transparent so i set fill to white. and filter: invert uses %.
filter: invert(1) <- Wrong
filter: invert(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>

Upvotes: 0

Related Questions