Маска Видео SVG фигур - PullRequest
Новая
       50

Маска Видео SVG фигур

0 голосов
/ 16 октября 2019

Я хотел бы вставить видео в форму SVG.

Форма выглядит следующим образом: Shape Я экспортировал их в .svg

Iпопытался использовать mask CSS и создать форму с помощью CSS, чтобы использовать overflow: hidden, но ничего.

Мне нужна ваша помощь, пожалуйста! Спасибо

1 Ответ

0 голосов
/ 16 октября 2019

Вы можете использовать clip-path - CSS: и как плюс object-fit

Свойство clip-path CSS создает область отсеченияэто устанавливает, какая часть элемента должна быть показана. Части, которые находятся внутри региона, показаны, а те, которые снаружи, скрыты.

просто примените его к видео без использования svg. 

video {
    object-fit: cover;
    clip-path: url(resources.svg#c1);
}

Вот демоверсия 

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0
}
figure{
  width: 100vw;
  height: 400px;
  position: relative;
  background-color: red; 
  overflow: hidden
}
video{
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 88% 63%, 58% 94%, 46% 94%, 13% 63%, 0 0);
}
figcaption{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 28vh;
  font-size: 3vw;
  font-weight: 900;
  text-transform: uppercase;
  z-index: 2;
}
 
<figure>
  <video controls controls autoplay preload="metadata" buffered loop>
 

      <source src="https://www.w3schools.com/html/mov_bbb.mp4"
              type="video/mp4">

      Sorry, your browser doesn't support embedded videos.
  </video>
  <figcaption>My Nice video</figcaption>
</figure>
...