2

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

введите сюда описание изображения

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
Павел
  • 79
  • 2
  • раз нету адекватных ответов - то вот смотрите : https://ru.stackoverflow.com/q/1260146/308951 – Резидент Казахстана Aug 09 '21 at 11:15
  • https://codepen.io/topicstarter/pen/rNjVKpQ так же посмотрите – Резидент Казахстана Aug 09 '21 at 11:17
  • @MaximLensky обьясните, пожалуйста, как вы выложили из собаки другое слово, копаюсь в devtools, но не дружу с svg, очень интересное наложение текста :) – highpassion Aug 09 '21 at 11:32
  • @highpassion я начинал с векторного редактора - и когда до меня дошло как это работает то стал весь svg писать руками ... сначала получаем path то есть два arc - это будет круг потом тексту делаем textPath то есть путь для текста будет эти два arc ... потом увеличиваем размер шрифта ..ну и всё собственно – Резидент Казахстана Aug 09 '21 at 11:48
  • @MaximLensky большое спасибо, буду пробовать – highpassion Aug 09 '21 at 11:50
  • @highpassion вы начните - скачайте inkscape он самый простой - нарисуйте сохраните и посмотрите что получится – Резидент Казахстана Aug 09 '21 at 11:50
  • @MaximLensky попробую, благодарю :) – highpassion Aug 09 '21 at 13:05

2 Answers2

1

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

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

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

Alexey Vladimirov
  • 1,509
1

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

Делаем два 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>
Резидент Казахстана
  • 13,519