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

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.

CodePudding user response：

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>