为什么
情况
我正在尝试用svg文件屏蔽一个视频。
浏览器：Firefox
我尝试过的
我设法让它有点工作，看这个问题。
<!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>
这个代码的问题是，掩码只获得视频的一小部分，而mask-repeat、mask-size等属性什么都不做。
如果我选择文件选项，那么mask-image: url("./media/mask.svg")，视频就会消失，更改遮罩属性的值也不会有任何作用。
问题
这里发生了什么？为什么我把svg路径放在html中，它有点工作，而不与文件一起工作？为什么遮罩属性似乎没有任何效果？请帮我理解。
谢谢。
我解决了这个问题，所以我在回答我自己的问题。
为什么它不适用于文件
我遇到了CORS问题，Firefox非常温和地没有告诉我任何事情。只是当我只是出于好奇而更改浏览器时，我在控制台中得到了错误。
为什么mask-*属性不起作用
如果您采用HTML方式，那么<mask id="mask">标记和mask = "url(#mask)"、CSSmask-*属性将不会产生效果。尺寸是已声明的尺寸，没有"尺寸"选项；自动响应"；。因此，如果你想让它以这种方式响应，你应该为svg和屏蔽媒体使用相对单位(em，rem，%，…(。
如何按照我想要的方式做
在使用svg文件时，需要记住的一件事是将width和height或viewbox定义为<svg>参数，否则mask-*属性将无效。
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>