проблема с маскировкой видео, размер видео во всю ширину, не может быть скрыт под логотипом svg - PullRequest
Новая
       45

проблема с маскировкой видео, размер видео во всю ширину, не может быть скрыт под логотипом svg

0 голосов
/ 28 июня 2019

У меня проблема с маскировкой видео. Размер видео - полная ширина, но он не может быть покрыт логотипом SVG.

здесь ссылка 

<div class="video-mask-otr">
<video class="bg-video" autoplay playsinline muted loop preload src=" http://urban.garotanzi.com/wp-content/uploads/2019/06/Background-Movie.mp4"></video>

    <svg class="banner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.46 223.7"><title>4Asset 1</title>

        <g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
             <defs>
                 <mask id="mask" x="0" y="0" width="100%" height="100%"> 
                      <rect fill="white" x="0" y="0" width="100%" height="100%"></rect>
                 <path d="M0,0V95A128.75,128.75,0,0,0,128.75,223.7h0V0Z"/><polygon points="144.72 223.7 273.46 223.7 273.46 0.7 144.72 223.7">     </mask>
            </defs>
            <rect fill="white" x="0" y="0" width="100%" height="100%"  id="mask-bg"></rect>
            </g></g></svg>

</div>

1 Ответ

1 голос
/ 28 июня 2019

У вас есть несколько ошибок. Есть теги без закрытия. Соотношение ширины и высоты вашего svg отличается от соотношения ширины и высоты видео. Я изменил svg's viewBox на "0 0 273.46 153.82".

Что нужно знать о масках, так это то, что в отличие от настоящих масок вы будете видеть только через маску. В вашем случае внутри маски у вас есть прямоугольник размером с svg, поэтому маска такая же большая, как svg, и вы увидите все под ней. Я удалил этот прямоугольник.

И теперь это работает, но есть еще одна проблема. Маска - это не то, что вы намереваетесь, а с точностью до наоборот. Решение этой проблемы - вернуться к чертежной доске и перерисовать путь для маски. 

body{background:black}
.video-mask-otr video,.video-mask-otr svg{position:absolute;top:0;}
<div class="video-mask-otr">
<video class="bg-video" autoplay playsinline muted loop preload src=" http://urban.garotanzi.com/wp-content/uploads/2019/06/Background-Movie.mp4" width="100%"></video>

<svg class="banner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.46 153.82"><title>4Asset 1</title>

        <g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
             <defs>
                 <mask id="mask" x="0" y="0" width="100%" height="100%"> 
                 <!--<rect fill="white" x="0" y="0" width="100%" height="100%"></rect>-->
                 <path fill="white" d="M0,0V95A128.75,128.75,0,0,0,128.75,223.7h0V0Z"/>
                 <polygon  fill="white"  points="144.72 223.7 273.46 223.7 273.46 0.7 144.72 223.7"/>     
               </mask>
            </defs>
            <rect fill="white" x="0" y="0" width="100%" height="100%"  id="mask-bg" style="mask: url(#mask)"></rect>
            </g></g></svg>

</div>
...