Question

我试图使用蒙版显示SVG图像，但在Firefox中它并没有出现。我的CSS类如下：

.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中，我的蒙面arrow-down.svg很好地展示了但是在firefox中出现了具有指定背景的div。关于如何解决我的问题的任何想法？

Answer 1

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

无效。你不能拥有一个整个SVG文件的掩码，它必须有一个指向掩码元素的片段标识符。

最重要的是，Firefox目前不支持网址之外的任何其他参数，因此no-repeat 100% 100%会导致其失败。

对于Firefox，您需要的是这样的：

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

其中maskelement是arrow-down.svg文件中<mask>元素的id。

CSS掩码不适用于Firefox

1 个答案: