CSS掩码不工作在Firefox上 [英] CSS Mask not working on firefox

问题描述

我尝试使用蒙版显示SVG图片，但在Firefox中不显示。我的CSS类如下：

I'm trying to show a SVG image using mask but in Firefox it isn't appearing. My CSS class is as follows:

.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代码只是一个简单的例子：

And html code is just a simple:

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

在chrome中，我的masked arrow-down.svg显示得很好，但在firefox中有指定背景的div正在出现。关于如何解决我的问题的任何想法？

In chrome, my masked arrow-down.svg is showing nicely but in firefox a div with specified background is appearing. Any idea on how to solve my problem?

推荐答案

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

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

is invalid. You can't have a mask that's an entire SVG file, it must have a fragment identifier that points to a mask element.

此外，Firefox目前不' t支持超出网址的任何其他参数，因此无重复100％100％将导致失败。

On top of that, Firefox currently doesn't support any additional parameters beyond the url so the no-repeat 100% 100% will cause it to fail.

对于Firefox你需要是这样的：

For Firefox what you need is something like this:

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

其中maskelement将是< mask> ;

where maskelement would be the id of a <mask> element within the arrow-down.svg file.

这篇关于CSS掩码不工作在Firefox上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！