Почему мое видео SVG-клипа работает только с одной формой, а не с другой? - PullRequest
Новая
       9

Почему мое видео SVG-клипа работает только с одной формой, а не с другой?

0 голосов
/ 19 января 2019

Мой css: 

 .svg-clipped {
        -webkit-clip-path: url(#svgPath);
        clip-path: url(#svgPath);
    }

    .svg-clipped_two {
        -webkit-clip-path: url(#svgPath_two);
        clip-path: url(#svgPath_two);
    }

Мой HTML: 

<!--1st SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153.37 494"><g data-name="Layer 2"><clipPath id="svgPath"><path d="M1093.37 0H60A60 60 0 0 0 0 60v374a60 60 0 0 0 60 60l1033.37-179c39.28-6.29 60-26.86 60-60V60a60 60 0 0 0-60-60z" fill="#990000" fill-rule="evenodd" data-name="Layer 1"/></clipPath></g></svg>

<!--Video 1-->
<video muted autoplay="autoplay" class="svg-clipped" type="video/mp4" src="Video1.mp4" style="margin: -500px 0 0 0; border: solid 0px #990000; width: 1200px; height: 600px; background-color: #990000; mix-blend-mode: normal;" ></video>

======================

<!--2nd SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153 494"><g data-name="Layer 2"><clipPath id="svgPath_two"><path d="M1093 0L60 179c-39.26 6.29-60 26.86-60 60v195a60 60 0 0 0 60 60h1033a60 60 0 0 0 60-60V60a60 60 0 0 0-60-60z" fill="#ffbe00" fill-rule="evenodd" data-name="Layer 1"/></g></clipPath></svg>

<!--Video 2-->
<video muted autoplay="autoplay" class="svg-clipped_two" type="video/mp4" src="Video2.mp4" style="margin: -500px 0 0 0; border: solid 0px #990000; width: 1200px; height: 600px; background-color: #990000; mix-blend-mode: normal;"></video>

Код отлично работает с первой формой и корректно обрезает видео. Тем не менее, вторая форма и видео не ведут себя, и видео не обрезается до формы соответственно, как первая. Почему это происходит и как мне это исправить?

1 Ответ

0 голосов
/ 19 января 2019

Для 2nd SVG Shape вы перепутали закрытие </g> и </clipPath>: 

<!--2nd SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153 494">
  <g data-name="Layer 2">
    <clipPath id="svgPath_two">
      <path d="M1093 0L60 179c-39.26 6.29-60 26.86-60 60v195a60 60 0 0 0 60 60h1033a60 60 0 0 0 60-60V60a60 60 0 0 0-60-60z" fill="#ffbe00" fill-rule="evenodd" data-name="Layer 1"/>
    </g> <!-- HERE -->
  </clipPath>
</svg>

Рабочий пример: 

video {
  margin: -500px 0 0 0;
  border: solid 0px #900;
  width: 1200px;
  height: 600px;
  background-color: #990000;
  mix-blend-mode: normal;
}

.svg-clipped {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

.svg-clipped_two {
  -webkit-clip-path: url(#svgPath_two);
  clip-path: url(#svgPath_two);
}
<!--1st SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153.37 494"><g data-name="Layer 2"><clipPath id="svgPath"><path d="M1093.37 0H60A60 60 0 0 0 0 60v374a60 60 0 0 0 60 60l1033.37-179c39.28-6.29 60-26.86 60-60V60a60 60 0 0 0-60-60z" fill="#990000" fill-rule="evenodd" data-name="Layer 1"/></clipPath></g></svg>

<!--Video 1-->
<video muted autoplay="autoplay" class="svg-clipped" type="video/mp4" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-3.webm"></video> ======================

<!--2nd SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153 494"><g data-name="Layer 2"><clipPath id="svgPath_two"><path d="M1093 0L60 179c-39.26 6.29-60 26.86-60 60v195a60 60 0 0 0 60 60h1033a60 60 0 0 0 60-60V60a60 60 0 0 0-60-60z" fill="#ffbe00" fill-rule="evenodd" data-name="Layer 1"/></clipPath></g></svg>

<!--Video 2-->
<video muted autoplay="autoplay" class="svg-clipped_two" type="video/mp4" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-5.webm"></video>
...