How to fill a SVG with the opposite background-color?

Question

I have a div where there is an SVG with the following code:

HTML

<div>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
   </svg>
</div>

CSS

div {
  background: linear-gradient(
                to bottom right, 
                var(--norm-col) 0%, 
                var(--norm-col) 50%, 
                var(--bg-color) 50%, 
                var(--bg-color) 100%);
}

div svg {
  width: 30px;
  height: 30px;
  mix-blend-mode: difference;
}

I want to fill the SVG white when it's on the black side, and black when it's on the white side.

Answer 1

mix-blend-mode works fine. Post your code please - something else must be going wrong.

 div { background: linear-gradient( to bottom right, black 0%, black 50%, white 50%, white 100%); } #test { position: absolute; top: 30px; left: 30px; width: 400px; height: 400px; } #testSVG { mix-blend-mode: difference; } body { background: blue; }

 <div id="test"> <svg id="testSVG" width="300px" height="300px"> <circle r="100" cx="150" cy="150" fill="white"/> </svg> </div>