Блог

Итак, я пытаюсь сделать текст заголовка анимированным с помощью фонового видео, воспроизводимого внутри букв. Приведенный ниже код — это мое решение, которое отлично работает во всех браузерах, кроме Safari. Я знаю, что safari лишь частично поддерживает clip-path, в чем, вероятно, и заключается проблема. Я ломал голову, пытаясь придумать решение, и мне нужны некоторые идеи. Можно ли изменить приведенный ниже код, чтобы он работал в Safari, или, возможно, есть другой подход, который я могу использовать для достижения того же результата.

Пример того, чего я пытаюсь достичь, можно увидеть здесь https://levelup.gitconnected.com/animate-svg-text-with-a-video-background-bf1d03e47600 Прокрутите вниз до текста «Жизнь на пляже» с видео на заднем плане.

Помощь очень ценится!

 <svg>
    <defs>
        <clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0013208333333333333, 0.002225925925925926)">
            <path d="M741.58,421.68V373H613.37V313h71.39V264.7H613.37v-43H736.26V173.06H563.65V421.68Zm-206.13,0V173.06h-49V278.19c0,13.85.71,45.11.71,54.34-3.2-6.39-11.37-18.82-17.4-28.06L381.67,173.06h-47.6V421.68h49V312.29c0-13.85-.71-45.11-.71-54.34,3.19,6.39,11.36,18.82,17.4,28.06l91.28,135.67ZM267.31,297.73c0,50.43-23.09,78.49-57.9,78.49s-58.95-28.77-58.95-79.2,23.08-78.5,57.89-78.5,59,28.77,59,79.21m51.14-.71c0-80.27-44.4-127.86-109-127.86-65,0-110.1,48.3-110.1,128.57s44.4,127.85,109.39,127.85c64.64,0,109.75-48.3,109.75-128.56" />
            <path d="M486.4,278.2c0,13.9,0.7,45.1,0.7,54.3c-3.2-6.4-11.4-18.8-17.4-28.1l-88.1-131.4h-47.6v248.6h49V312.3
        c0-13.9-0.7-45.1-0.7-54.3c3.2,6.4,11.4,18.8,17.4,28.1l91.3,135.7h44.4V173.1h-49V278.2z" />
            
            
        </clipPath>
    </defs>
</svg>

<div class="video-container">
    <video loop autoplay muted playsinline>
        <source src="#" type="video/mp4">
        <source src="#" type="video/webm">
                <img src="#">
    </video>
</div>
 

В моем css-файле у меня есть это —

 video {
 -webkit-clip-path: url(#clip-00);
  clip-path: url(#clip-00);