"mask" properties and "mask-image: url(file.svg)" don't work-CodePudding

The situation

I'm trying to mask a video with an svg file.

browser: Firefox

What I've tried

I managed to get it kinda working looking at this question.

<!DOCTYPE html>

<style>
  path {
    fill: white;
  }
  
  video {
    mask-image: url("#mask");
  }
</style>


<svg>
  <mask id="mask">
    <path
       d=" *insert path coordinates here* "
       />
  </mask>
</svg>

<video playsinline autoplay muted loop>
  <source src="./media/bg.webm">
</video>

The problem with this code is that the mask gets only a fraction of the video, and properties like mask-repeat mask-size etc.. don't do anything.

If I go for the file option, so mask-image: url("./media/mask.svg"), the video simply disappear, and changing values of the mask properties also don't do anything.

The question

What is happening here? Why if I put the svg path in the html it kinda works and doesn't with a file? Why the mask properties doesn't seem to have any effect? Please help me understand.

Thanks.

CodePudding user response：

I resolved the problem, so I'm answering my own question.

Why it didn't work with the file

I was having a CORS problem, and really gently Firefox told me nothing. Only when I changed browser just out of curiosity, I got the error in console.

Why the `mask-*` properties weren't working

If you go for the HTML way, so <mask id="mask"> tag and mask = "url(#mask)", CSS mask-* properties won't have effect. Dimensions are the declared ones, without options for "auto-responsiveness". So if you want it responsive in this way, you should use relative units (em, rem, %, ...) for both the svg and the masked media.

How to do it the way I wanted

One thing to keep in mind when you are going to use your svg file, is to define either width and height or viewbox as <svg> parameters, or the mask-* properties won't have effect.

video {
  mask-image: url(https://mdn.github.io/css-examples/masking/star.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  
  -webkit-mask-image: url(https://mdn.github.io/css-examples/masking/star.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
}

<video src="https://file-examples.com/storage/feb2e515cc6339d7ba1ffcd/2020/03/file_example_WEBM_480_900KB.webm" autoplay loop muted></video>