Видео видно через буквы SVG, сохраняя фиксированный фон и черное окружение. ⇐ Html

[Anonymous]

Я пытаюсь создать фиксированный фон видео, который будет виден только через пути SVG (буквы). Остальная часть вокруг SVG должна быть черной.
Однако, когда я исправляю видео, оно некорректно обрезается с SVG. Когда я использую clip-path или ForeignObject, видео перемещается вместе с SVG.

Код: Выделить всё

function initHorizontalScroll() {
gsap.registerPlugin(ScrollTrigger);

const letterContainer = document.querySelector(".letter-container");
const letterWrapper = document.querySelector(".letter-wrapper");

if (!letterContainer || !letterWrapper) return;

gsap.set(letterContainer, {
x: 0
});

const containerWidth = letterContainer.scrollWidth;
const viewportWidth = window.innerWidth;

const scrollDistance = containerWidth - (viewportWidth / 3);

if (scrollDistance  `+=${scrollDistance}`,
pin: true,
scrub: 1,
anticipatePin: 1,
invalidateOnRefresh: true,
}
});
}

Код: Выделить всё

.hero {
height: 100svh;
width: 100%;
position: relative;
background-color: var(--black);
overflow: hidden;
}

.letter-container {
height: 100%;
width: 120%;
position: relative;
z-index: 2;
mix-blend-mode: screen;
}

.letter-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}

.letter-wrapper svg {
width: 100%;
height: auto;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... lack-surro