SVG Clip path with inline-svg over a video-CodePudding

I am trying to clip a video using the clippath tag and inline svg. I am aware of the numerous posts on this issue but I can't identify the issue that caused the video to be blanked out entirely when I tried to apply the same technique (On chrome, I am not sure if the same issue takes place in firefox as well).

I have tried to convert the SVG into ObjectBoundingBox units using the following website. However, I am not sure about the interaction between that and the use of viewbox attribute. https://yoksel.github.io/relative-clip-path/

Here is a minimum reproducible sample.

https://codepen.io/fakeaccasdjklasdlk/pen/LYmYKXx

HTML:

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" version="1.1" viewBox="0 0 512 512" fill="black">
              <clipPath id="overlay">
                <g>
                  <path d="M361.4 253.4h87.4c5.6 0 10.7-3.3 13-8.4 2.3-5.1 1.4-11.1-2.3-15.2L349.4 105.5c-4.1-4.7-10.8-6.1-16.5-3.5L58.3 226.2c-6.1 2.8-9.4 9.4-8 15.9 1.4 6.5 7.2 11.2 13.9 11.2h258l93.5 98.2H64.2c-7.8 0-14.2 6.4-14.2 14.2 0 7.8 6.4 14.2 14.2 14.2h384.6c5.7 0 10.8-3.4 13.1-8.6 2.2-5.2 1.2-11.3-2.8-15.4l-97.7-102.5zm-26.3-121.2 82.2 92.8H130l205.1-92.8z" />
                  <path d="M315.1 305.1c0-11.3-9.2-20.5-20.5-20.5s-20.5 9.2-20.5 20.5 9.2 20.5 20.5 20.5 20.5-9.2 20.5-20.5zM181.9 305.1c0-11.3-9.2-20.5-20.5-20.5s-20.5 9.2-20.5 20.5 9.2 20.5 20.5 20.5 20.5-9.2 20.5-20.5z" />
                </g>
              </clipPath>
              
            </svg>

<!-- This one works for some reason unbeknownst to me>
<!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" >
              <clipPath id="overlay" clipPathUnits="objectBoundingBox">
                <path strokeLinecap="round" strokeLinejoin="round" d="M1,0.636 l-0.5,-0.428,-0.5,0.428 v-0.174 l0.5,-0.428,0.5,0.428 M0.875,0.62 v0.413 h-0.25 v-0.276 h-0.25 v0.276 h-0.25 v-0.413 l0.375,-0.31" />
              </clipPath>
            </svg> -->

CSS:

video {
  clip-path: url(#overlay);
  -webkit-clip-path: url(#overlay);
  width: 100%;
  z-index: 1;
}

I included a clippath that does work using ObjectBoundingBox units.

CodePudding user response：

Group elements are not allowed within clip paths. Remove the <g> and </g> tags, and your example will work.