Use CSS filter: invert(1) to show black image on white background-CodePudding

I have a circle graphics to span across half black & half white background color generated by CSS. I would like to have the effects that the colors in the area of the circle covered turns white to black, and turns black to white (invert the color). The effects should look like this:

However, the white background color side is incorrect right now. How can I modify the codes in order to make the white area covered by the circle turns black?

p.s. in the real scenario, the circle will be replaced by a complex shape.

Here is the snippet:

.bg {
  background-image: linear-gradient(90deg, black 50%, white 50%);
}

svg {
  filter: invert(1);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div >
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100%">
  <circle cx="50" cy="50" r="30" fill="black" />
</svg>
    </div>
  </div>
</div>

CodePudding user response：

Try adding mix-blend-mode to the SVG

.bg {
  background-image: linear-gradient(90deg, black 50%, white 50%);
}

svg {
  filter: invert(1);
  mix-blend-mode: difference;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div >
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100%">
  <circle cx="50" cy="50" r="30" fill="black" />
</svg>
    </div>
  </div>
</div>