SVG Image Mask Not Working In Firefox or IE

问题:

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!

回答1:

According to http://www.w3.org/TR/SVG/propidx.html you can apply a mask to container elements and graphics elements. Unfortunately <foreignObject> is in neither of these lists so the correct rendering for that element is to ignore the mask property. IE and Firefox are therefore correct in their rendering of this example.

回答2:

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

回答3:

You could rewrite your svg like this to make it work in all svg-supporting browsers:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
            <image width="78" height="78" xlink:href="images/mask.png"/>
        </mask>
    </defs>
    <image xlink:href="images/avatar-sample.jpg" width="78" height="78"/>
</svg>