情況
我正在嘗試使用 svg 檔案屏蔽視頻。
瀏覽器：火狐
我試過的
看著這個問題，我設法讓它有點作業。
<!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 中它有點作業并且不適用于檔案？為什么遮罩屬性似乎沒有任何效果？請幫我理解。
謝謝。
uj5u.com熱心網友回復：
我解決了這個問題，所以我正在回答我自己的問題。
為什么它不適用于檔案
我遇到了 CORS 問題，而且 Firefox 真的輕輕地什么也沒告訴我。只有當我出于好奇而更改瀏覽器時，我才在控制臺中收到錯誤訊息。
為什么mask-*屬性不起作用
如果您選擇 HTML 方式，那么<mask id="mask">tag 和mask = "url(#mask)", CSSmask-*屬性將不起作用。尺寸是宣告的尺寸，沒有“自動回應”選項。因此，如果您希望它以這種方式回應，您應該為 svg 和蒙版媒體使用相對單位（em、rem、%、...）。
如何按照我想要的方式做
當您要使用 svg 檔案時要記住的一件事是將widthandheight或 or定義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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516160.html