CSS掩碼不能在Firefox上工作

我試圖顯示一個使用掩碼的SVG圖像，但在Firefox中沒有出現。我的CSS類如下：CSS掩碼不能在Firefox上工作

.myClass { 
    -webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%; 
    mask: url('../img/arrow-down.svg') no-repeat 100% 100%; 
    background: rgba(67, 67, 67, 0.8); 
    width: 1.15em; 
    height: 1em; 
}

和HTML代碼僅僅是一個簡單的：

<div class="myClass"></div>

在Chrome中，我的蒙面箭頭down.svg是很好的展示，但在Firefox與指定的背景一個div正在出現。有關如何解決我的問題的任何想法？

來源

2016-07-29 Nafiul Islam

@Kaiido：你確定mask和FFs一起工作嗎？閱讀我可以使用它，它只能在內聯SVG中使用FF。我甚至在文檔[這裏]提到它（http://stackoverflow.com/documentation/css/3721/clipping-and-masking#t=201607290458575374941）。如果你可以給我使用外部SVG的鏈接，我也會改變文檔。 – Harry

@harry我敢肯定，FF和外部SVG一起工作。你錯誤地解釋了結果。它試圖說掩模圖像不起作用，但SVG掩模（包括外部掩模）確實有效。 –

@RobertLongson：嗯，ID部分似乎是缺少的。我之前沒有嘗試過，但沒有成功，另一個用戶（認爲這個ID是Kaiido）也證實了這一點，這就是爲什麼我認爲這是事實。感謝澄清。我會更新這個文件也:) – Harry

mask: url('../img/arrow-down.svg') no-repeat 100% 100%;

無效。你不能有一個整個SVG文件的掩碼，它必須有一個指向掩碼元素的片段標識符。

最重要的是，Firefox目前不支持url以外的其他參數，因此no-repeat 100% 100%將導致它失敗。

對於Firefox，你需要的是這樣的：

mask: url('../img/arrow-down.svg#maskelement')

其中maskelement將是箭頭down.svg文件內的<mask>元素的ID。

來源

2016-07-29 07:08:19

CSS掩碼不能在Firefox上工作

回答

相關問題