Возможно ли задавать для SVG элементов цвета зависимые от фона?

Question

Есть некая SVG анимация состоящая из <path> она двищеться вдоль экрана с белым и черным фоном. Возможно ли средствами СSS/SVG сделать так что б попадая в пространство черного фона элементы SVG меняли цвет на белый? Я думал, что можно как-то сделать это при помощи mix-blend-mode Но что-то адекватного результата пока не вышло. Может кто-то может посоветовать ?

Вот в качестве самого простого примера

body{
  padding: 0;
  background: linear-gradient(90deg, #fff 50%, #00f 50%, #00f);
  display:grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
}

svg{
  mix-blend-mode: multiply;
}

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 50 L190 50" stroke="black"  fill="none"/>
</svg>

Можно ли сделать что б правая часть линии была белой не меняя html ?

Answer 1

Необходимо было выбирать режим смешивания: mix-blend-mode: difference

difference
Разница. В этом режиме вычитается либо совмещённый цвет из основного цвета, либо основной цвет из совмещённого цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений.

body{
  padding: 0;
  background: linear-gradient(90deg, #fff 50%, #000 50%);
  display:grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
}

#rect1, #path1 {
   mix-blend-mode: difference;
  background-color:black;
   }

<svg id="svg1" width="300" height="120" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red">
    <path id="path1" d="M10 50 L190 50" stroke="white" stroke-width="2" >
                   <!-- Анимация линии -->
    <animateTransform attributeName="transform" type="translate" values="-120;160;-120" begin="0s" dur="3s"
     fill="freeze" repeatCount="indefinite" />
    </path>
                    <!-- Анимация прямоугольника -->
    <rect id="rect1" x="10" y="5" width="50" height="20" fill="white" >
       <animate attributeName="x" begin="1s" dur="6s" values="10;250;10" fill="freeze" repeatCount="indefinite" />
    </rect>
</svg>

БЛОГ НА HUSL

Возможно ли задавать для SVG элементов цвета зависимые от фона?

Ответы (1 шт):