Firefoxで応答するSVGイメージマスクを取得できません

Question

私はSVGでFirefoxでイメージをマスクしようとします。画像が反応するので、マスクも反応的でなければなりません。

単純なSVGサークルマスクと属性maskUnits="objectBoundingBox"とmaskContentUnits="objectBoundingBox"では、SVGマスクは期待どおりに機能します。このfiddleを参照してください。

しかし、私のパスをIllustratorからエクスポートして、単純なSVGサークルマスクと同じ方法でインクルードすると、動作しません。 maskUnits="objectBoundingBox"とmaskContentUnits="objectBoundingBox"の属性を削除すると、イメージはマスクされますが応答はありません。このfiddleを参照してください。

私は、応答性を取り戻すためにIllustratorで動作する属性viewboxを含めるようにしていますが、それはしません。

誰かが、反応性の高いSVGイメージマスクを動作させる方法を知っている人はいますか？

OSXで現在のFirefox 45.0.2を使用しています。ありがとうございました！私は唯一の二乗SVGs（高さ=幅）の上に私の電卓をテストしたものの、それがうまく働いていた800ピクセル、私はあなたのケースで最高の寸法値をしようとしたとき

Answer 1

、このfiddleを試してみてください。

HTML：

<svg height="0" viewBox="0 0 800 500"> 
    <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
    <path d="M0,0.05C0.03375,0.03,0.08625,0.00625,0.15125,0.0025,0.25375-0.0025,0.27375,0.04625,0.3775,0.04875c0.12125,0.0025,0.15-0.065,0.25375-0.0425,0.06125,0.0125,0.0675,0.04125,0.12625,0.055C0.84625,0.08375,0.9325,0.0425,0.99875,0V0.625L0,0.625V0.05Z" style="fill:white"/> 
    </mask> 
</svg> 
<img src="https://placebear.com/800/500" id="test" alt=""> 

CSS：

#test { width: 100%; height: auto; mask: url(#m1); } 

あなたはすべての問題を持っているなら、私に知らせてください。