CSSマスクがFirefoxで動作しない

マスクを使用してSVGイメージを表示しようとしていますが、Firefoxでは表示されません。次のように私のCSSクラスがある：CSSマスクがFirefoxで動作しない

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

クロームで、私のマスクされた矢印-down.svgは、指定された背景とうまくしかし、Firefoxでのdivを示しています出現している。どのように私の問題を解決するための任意のアイデア？

出典

2016-07-29 Nafiul Islam

@Kaiido：外部SVGでFFでマスクが動作することは確かですか？私はFFでインラインSVGでしか動作しません。私はそれをドキュメント[ここ]（http://stackoverflow.com/documentation/css/3721/clipping-and-masking#t=201607290458575374941）でも言及していました。外部SVGと連携して私のリンクを私に与えることができれば、私もドキュメントを変更します。 – Harry

@harry私はマスクが外部SVGでFFで動作することを確信しています。 canIUseの結果を誤解しています。マスクイメージは機能しませんが、SVGマスク（外部のものも含む）が機能すると言います。 –

@RobertLongson：ああ、そのID部分は欠けている部分のようです。私はそれを以前に試してみましたが、それはうまくいかず、他のユーザー（IDがカイードだと思っています）もこれを確認しました。明確化のためにありがとう。私もこれをドキュメントに更新します:) – Harry

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

は無効です。 SVGファイル全体のマスクを持つことはできません。マスク要素を指すフラグメント識別子を持つ必要があります。

Firefoxは現在、URL以外のパラメータをサポートしていないため、no-repeat 100% 100%は失敗します。 maskelementは矢印down.svgファイル内<mask>要素のidになり

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

：何が必要Firefoxの場合

はこのようなものです。

出典

2016-07-29 07:08:19

CSSマスクがFirefoxで動作しない

答えて

関連する問題