SVG图像蒙版在Firefox或IE中不起作用

问题描述

我很容易用PNG(黑色圆圈，透明背景)制作了一个蒙版，并为chrome之类的浏览器使用了-webkit-mask-image:url(images/mask.png).但是我在使用SVG在Firefox中显示掩码时遇到了严重的问题

I have easily made a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) for browsers like chrome. But i am having serious issues getting the mask to show in Firefox using SVG

<svg>
    <defs>
        <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
            <image width="78px" height="78px" xlink:href="images/mask.png"/>
        </mask>
    </defs>
    <foreignObject width="78px" height="78px" style="mask: url(#mask);">
        <img src="images/avatar-sample.jpg" />
    </foreignObject>
</svg>

我真的不明白为什么这不起作用！

I really cannot see why this isn't working!

推荐答案

由于IE无法理解外部"对象，因此您必须使用javascript解决它，并检查是否可以支持它，如果可以，将其注入，如果不能避免的话.那么您必须使用IE的内置滤色器来创建专门用于IE的自己的抠像效果.下面的此站点通过示例向您展示了如何做到这一点.

Because IE does not understand the "foreign" object, you have to work around it with javascript and check if you can support it, if so inject it in, and if not avoid it. then you have to use IE's built in color filters to create your own chromakey effect specifically for IE. this site below shows you how to do it with examples.

http://thenittygritty.co/css-masking

这篇关于SVG图像蒙版在Firefox或IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！