css - 为什么我的 SVG 剪辑视频只适用于一种形状而不适用于另一种形状？

Question

我的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>

该代码在第一个形状上运行良好，并将视频正确地剪辑到该形状。但是，第二个形状和视频没有表现，并且视频没有像第一个那样被相应地剪裁成形状。为什么会发生这种情况，我该如何解决？

Answer 1

对于 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>