Как в анимации которая крутиться постоянно, менять Fill когда она проходит черный блок

Question

Есть блок svg, он крутится постоянно, сам блок черный, но часть его постоянно находится на черном блоке с gif. Нужно чтобы когда он его проходил, чтобы та часть становилась белой. mix-blend-mode: difference; не помогает, становится немного светлее и все, но это все равно темно-серый цвет. Какие есть варианты сделать такое? Я бы мог вставить сюда код, но к сожалению с обычным блоком все получается, а такую картинку сюда не вставить

Answer 1

Можно сделать блок совпадающий по размерам и координатам c gif-картинкой. Разместить его над обоими элементами по z-оси и добавить свойство backdrop-filter:invert()

Оба элемента инвертируются, текст в этом месте станет белым. Вернуть нормальные цвета гифке можно применив соответствующий фильтр к ней самой: filter:invert()

UPD: убедитесь, что в SVG нет белого квадрата на фоне текста.

Answer 2

Показываю пример такой реализации

Делаем два svg и оборачиваем их по отдельности в блоки и присваиваем имена

для примера это будут item1 и item2 где item2 абсолютно спозиционирован и группа под классом group крутиться один в один в css вместе с item1 вот и вся махинация

если я что то не так сделал то уточните

Выглядит это вот так

.svg {
  background: url(https://i.gifer.com/embedded/download/732H.gif);
  background-size: 300px 300px;
}

.group {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}

.parent {
  width: 500px;
  position: relative;
  overflow: hidden;
}

.item1 {
  animation: rotate 10s linear infinite;
}

.item2 {
  position: absolute;
  top: 45px;
  right: -25px;
  width: 250px;
}

<div class="parent">
  <div class="item1">
    <svg viewBox="-450 -100 1000 1000" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,0 A 400 400 0 0 0 100 830 A 400 400 0 0 0 0 0" fill="none" id="path" />

      <text text-anchor="middle" fill="#000" font-family="sans-serif">
        <textPath href="#path" font-size="110px" letter-spacing="15" startOffset="50%">
          Quick brown fox jumps over the lazy dog.
        </textPath>
      </text>
    </svg>
  </div>
  <div class="item2">
    <svg class="svg" viewBox="100 0 500 500" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,0 A 400 400 0 0 0 100 830 A 400 400 0 0 0 0 0" fill="none" id="path" />
   <g class="group">
      <text text-anchor="middle" fill="#fff" font-family="sans-serif">
        <textPath href="#path" font-size="110px" letter-spacing="15" startOffset="50%">
          Quick brown fox jumps over the lazy dog.
        </textPath>
      </text>
  </g>
    </svg>
  </div>
</div>

БЛОГ НА HUSL

Как в анимации которая крутиться постоянно, менять Fill когда она проходит черный блок

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