клип-путь с видео html - PullRequest
Новая
       36

клип-путь с видео html

0 голосов
/ 09 января 2020

У меня проблема со свойством clip-path с тегом video в браузере Safari. В chrome и firefox клип-путь с видео работает нормально. На самом деле Saffary должен это поддерживать, возможно, в моем коде есть другие ошибки. Пожалуйста, посоветуйте мне что-нибудь, чтобы он работал в Safari. Спасибо! 

<video loop width="852" height="480" autoplay class="svg-clipped-text">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4">
</video>

<svg height="0" width="0">
  <clipPath id="svgTextPath">
     <text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Luckiest Guy" font-size="210px">
       BOUNCE
     </text>
   </clipPath>
</svg>
<br />
<a href="https://sarasoueidan.com/blog/css-svg-clipping/" title="Sara Soueidan is a freelance front-end Web developer, author and speaker from Lebanon." >Sara Soueidan's Excellent SVG Clipping Article</a>
<p>Safari/Edge/IE no joy :(</p>

    video{
  display:block;
  margin:20px auto;
}
.svg-clipped-text {
    -webkit-clip-path: url(#svgTextPath);
    clip-path: url(#svgTextPath);
}


a{
  display:block;
  text-align:center;
  margin-top: -200px;
}
p{
  text-align:center;
}

codepen

попробуйте поиграть здесь

1 Ответ

0 голосов
/ 10 января 2020

Вы не можете использовать клип-путь к тегу видео в браузере Safari, так как он не отображает форму. Вместо этого используйте clip-path в родительском блоке, и он будет работать в Safari.

...