我正在尝试使用遮罩显示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。关于如何解决我的问题有什么想法吗?
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
是无效的。您不能拥有一个整个SVG文件的遮罩,它必须具有指向mask元素的片段标识符。
最重要的是,Firefox当前不支持URL之外的任何其他参数,因此no-repeat 100% 100%
会导致失败。
对于Firefox,您需要的是这样的东西:
mask: url('../img/arrow-down.svg#maskelement')
其中maskelement是<mask>
arrow-down.svg文件中元素的ID 。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句