为何SVG clip-path仅对一个视频生效，另一个无法裁剪？如何修复？

Hey there, let's figure out why your second clip-path isn't working!

Root Cause #

Looking at your second SVG code, there's a tag nesting mistake that's breaking the clipPath definition:

• In the first working SVG, the <clipPath> element is properly wrapped inside the <g> tag (correct structure: <svg><g><clipPath>...</clipPath></g></svg>)
• But in the second SVG, you closed the <g> tag before closing the <clipPath> tag. This invalid nesting confuses the browser, which can't properly recognize the #svgPath_two clip path reference.

Here's the problematic part of your second SVG:

<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> <!-- This closes the <g> too early! -->
</clipPath> <!-- Now <clipPath> is outside the <g>, which is invalid -->

Fix #

Simply adjust the tag order to make sure <clipPath> is fully contained within the <g> tag. Here's the corrected second SVG:

<!--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> <!-- Now we close <clipPath> first -->
  </g> <!-- Then close the <g> tag -->
</svg>

Full Corrected Code #

Here's the complete fixed code for reference:

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 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 (Fixed!)-->
<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 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>

Why this works: SVG relies on proper XML-style tag nesting. When you close the <g> before the <clipPath>, the browser tries to fix the invalid structure, but this often results in the clipPath element being placed outside the intended context, making its id unrecognizable to the clip-path CSS property. Fixing the nesting ensures the browser correctly parses and registers the #svgPath_two clip path.

内容的提问来源于stack exchange，提问作者WillingLearner