svgファイルの画像でマスクをかける

Question

###前提・実現したいこと
単純に長方形の画像に対してsvgファイルで作成した画像（角丸四角形）で切り抜いたようなマスクをかける作業を、全てのブラウザで適用されるようにしたいです。（※添付画像参照）
画像は任意の数多くの四角形画像に適用する必要があります。

もしsvg画像でのマスク（クリッピング？）が無理でしたら、代替案があればご提案いただければ幸いです。

###発生している問題
現状ではChrome/safariでは問題なく表示されるのですが、FireFoxやIEでは適用されていません。

###試したこと
〇こちらのURLにある内容で、chrome/safariでの表示は問題なくできました。
http://qiita.com/HAKASHUN/items/fbd743336718c64bfe2a

〇FireFoxで表示されないかと以下のURLを参考にしたのですが、適用されませんでした。
https://hyper-text.org/archives/2016/06/firefox_47_release.shtml

###該当のソースコード

<div class="icon">
<img class="waku" src="sample.jpg">
</div>

.icon {
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 8px;
}
.icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    margin: 0;
}
.waku{
    mask-image: url(/images/mask.svg);
    -webkit-mask-image: url(/images/mask.svg);
    mask-image: url(/images/mask.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
}

###補足情報
JSでsample画像は上下中央寄せになるようにしています。

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、URLにはリンクを張ることができますので、編集よろしくお願いします。

[x17kusyr]

質問初めてなもんで、勝手がわからずすみませんでした。

Answer 1

Firefox の CSS Masks はインラインSVGのみサポートされているようです。

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=css-masks

【CSSとSVGを使ってWebページの要素にマスクをかける方法 - WPJ】
https://www.webprofessional.jp/masking-in-the-browser-with-css-and-svg/

インラインSVGでクリップしてしまう方法であれば IE10+ / Firefoxでも対応できそうです。

【CSSのみで画像のマスキング - Qiita】
http://qiita.com/C058/items/25f0c5e362ba7a5e99e3

【SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！ | Webクリエイターボックス】（記事の最後の例のみIE可）
http://www.webcreatorbox.com/tech/svg-mask/

Comments

[x17kusyr]

回答ありがとうございました。
マスクをかけることには成功しましたが、現状では大きさの調整など上手くいっておりません。
実際のサイトに適用させるには現状ではブラウザが対応しきれていない感じがしました。