Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
エフェクト Widely available

mask-type

SVGマスクの種類を制御するプロパティです。luminanceを指定すると色の明るさに基づいてマスクが適用され、alphaを指定すると透明度に基づいて適用されます。SVGグラフィックの高度なマスキング効果を実現する際に使用し、mask-modeプロパティでCSS側からオーバーライドすることも可能です。

SVGマスクマスクタイプ

概要

SVGマスクの種類を制御するプロパティです。luminanceを指定すると色の明るさに基づいてマスクが適用され、alphaを指定すると透明度に基づいて適用されます。SVGグラフィックの高度なマスキング効果を実現する際に使用し、mask-modeプロパティでCSS側からオーバーライドすることも可能です。

対応ブラウザ

デスクトップ

Chrome 24+
Edge 79+
Safari 7+
Firefox 35+

モバイル

Chrome Android 25+
Safari iOS 7+
Firefox Android 35+

基本構文

CSS 
mask#alpha-mask {
  mask-type: alpha;
}
mask#luma-mask {
  mask-type: luminance;
}

実務での使いどころ

  • SVGマスクの種類制御

    グラデーションマスクで輝度マスクを使用し、明るさに基づいた滑らかなフェード効果を作成します。

注意点

  • mask-typeはSVGの<mask>要素に対してのみ適用されます。CSS要素に直接適用する場合はmask-modeを使用してください。

アクセシビリティ

  • マスク効果によってコンテンツが過度に隠されないようにし、重要な情報が常に視認可能であることを確認してください。

参考リンク