Как сделать svg маску для видео?

Question

[Лев Александров]

Помогите сделать маску для видео. Есть какой-нибудь гайд?
У меня есть готовая svg с path внутри и видео mp4. Посмотрел видео на ютубе, но моя svg обрезается, я не знаю как правильно задать ей размер.

Comments

[Максим]

Что за path? Покажите ссылку на песочницу

[Лев Александров]

Brasileiro, я внизу подробно расписал Вадиму, можете посмотреть.

Answer 1

[Вадим]

Вот вариант с path внутри, работает в ie 11 и нормально масштабируется

Comments

[Лев Александров]

Там используется clip-path, который не поддерживается в IE11, а он мне нужен.

[Вадим]

Лев Александров, Стоит сразу указывать всю важную информацию в вопросе.

[Вадим]

Лев Александров, Обновил ответ.

[Лев Александров]

Вадим, Вадим, спасибо за помощь, я использую тот же метод, увидел его на ютубе, но у меня с ним проблема возникла, вот посмотрите, тут подробнее расписал: https://stackoverflow.com/questions/68770659/how-t....

Я подставляю свою фигуру, но она отображается не так, как я хочу. Поэтому я решаю изменить viewBox, чтобы мой рисунок отобразился как надо, но это приводит к другой проблеме.

[Лев Александров]

Вадим, подсмотрел в вашем решении атрибут preserveAspectRatio и что-то начало выходить:

Надо только опустить рисунок. Как мне подобрать нужные значения viewBox и этого атрибута, чтобы рисунок выглядел так, как я хочу. Может, сервисы какие-нибудь есть?

[Вадим]

Лев Александров, для этого нужно свг иметь с таким же изначальным соотношением сторон, как и видео блок, а у вас, судя по всему, наоборот. Видео горизонтальное, скажем, 16:9 а свг вертикально 16:9. В итоге если ставить значение preserveAspectRatio такое, чтобы лось полностью отобравжался, то видео по краям перестаёт обрезаться

[Лев Александров]

Вадим, у меня не будет этот лось на 100% экрана, только на 50% слева должен расположиться. А на видео плевать вообще. Я его собирался растянуть на 100% и translateX(-25%) чтоб в лосе примерно центр видео показывался. Крч вот, если интересно: https://disk.yandex.ru/i/N8XdhJNLNiE3Hg

[Вадим]

Лев Александров, ну тогда поиграйтесь со значениями preserveAspectRatio . css.yoksel.ru/svg-sizes тут есть интерактивный вариант, показывающий разницу

[Лев Александров]

Вадим, спасибо)

[Лев Александров]

Вадим, ну с горем пополам что-то начало выходить, но лол, а как мне сделать, чтобы контент на видео не налез а как как бы под маску заходил?


Вот, что в макете:


Так еще и background image для hero как-то надо задавать в обход этого оленя. Я же не могу элементу rect его задать. Мне кажется или это невозможно для IE11 сделать... Чел на stackoverflow сказал, что для IE11 нет лучших решений.

[Вадим]

Лев Александров,

а как мне сделать, чтобы контент на видео не налез а как как бы под маску заходил

Сделать свг с такими же пропорциями как видео блок.
То ест размер оленя можно и сохранить, но чтобы холст был такого же размера\соотношением сторон как видео.
То есть если видео 600х400 (ширина х высота), что даёт нам соотношение 600\400 = 1,5 то и холст, на котором нарисован олень, должен иметь такое же соотношение ширины к длине. Это может быть как 600\400б так и 150х100 или даже 1500х1000.

Мне кажется или это невозможно для IE11

Укажи Вы сразу всю информацию в вопросе, мы бы не тратили столько времени впустую. Относитесь к чужому времени уважительнее.

Можете ещё попробовать с помощью canvas. Вот статья, только она не ie11 ready. Нужно будет обмазаться полифилами. И, наверное, заработает.

Есть ещё библиотека https://github.com/m90/seeThru . Там есть примеры.
Делает вроде как то что Вам нужно в IE11, но в хроме не работает. Начиная с IE10 conditional comments были выпилены, так что придётся выбирать что и как отображать иным путём.

Ну и ещё есть альтернативный вариант. Если заказчику так супер пупер нужен мёртвый не поддерживаемый браузер, то пусть его контент менеджер загружает уже такие обрезанные по маске оленя видео с прозрачным фоном. Но я сам такого не пробовал, и как себя поведёт IE - не знаю.