0

PNG（黒い円、透明な背景）でマスクを簡単に作成し、-webkit-mask-image:url(images/mask.png)クロムなどのブラウザに使用しました。しかし、SVG を使用して Firefox でマスクを表示する際に深刻な問題が発生しています

<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>

これが機能しない理由が本当にわかりません！

4

3 に答える 3

0

IE は「外部」オブジェクトを認識しないため、JavaScript を使用して回避し、サポートできるかどうかを確認し、サポートできる場合は挿入し、サポートできない場合は回避する必要があります。次に、IE に組み込まれているカラー フィルターを使用して、IE 専用の独自のクロマキー効果を作成する必要があります。以下のこのサイトでは、例を使用してそれを行う方法を示しています。

http://thenittygritty.co/css-masking

于 2013-07-30T13:41:20.583 に答える