【CSS mask-image】SVGを使ったクリッピングマスクのサイズや位置を自由に調整したい！

この記事は 【CSS clip-path】SVGを使ったクリッピングマスクの位置を右から○pxにするには の続編です！

デモはこちら

clip-pathを使ったバージョンでは、デザインデータがそもそも「シェイプでマスク」をつかった前景と、不透明度を使った背景の2枚の画像の重ね合わせでした。

今度は「前面オブジェクトで型抜き」された白背景が、画像の上に重なっているバージョンを、CSSの mask-image プロパティでやってみます！

準備

SVGの準備

1. デザインデータのパスを書き出します
2. XDから書き出したSVGは余分な transform 属性が入っているので、SVGをIllustatorで書き出しなおします
   1. IllustatorでSVGを開きます
   2. アートボードをSVGに書き出します
3. SVGのコードを整理して、<path>にfill=”#000″で色を塗っておきます。
   （styleなどで色が塗られていると思いますが、消してからfillで塗っておくとコードがすっきりします）

HTMLの準備

こんな感じで。

<div class="mv">
    <img src="mv01.jpg" width="1920" height="1280" alt="">
</div>

CSSの準備

画像の上に、半透明の白い要素をかぶせておきます。あとでこの要素をくり抜きます。

.mv{
    position: relative;
    height: 100vh;
}
.mv img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv::after{
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(255,255,255,0.8);
}

実装

画像の上に重ねた半透明の白い要素に、 mask-imageでマスクを実装します。

https://caniuse.com/mdn-css_properties_mask-image

CSSでマスクを実装

.mv::after{
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(255,255,255,0.8);

    /* ▼ 以下がマスク用 */
    mask-image: url("mv.svg"),  conic-gradient(#000 0 0);
    mask-position: calc(100% - 100px) center, 0 0;
    mask-repeat: no-repeat;
    mask-size: 717px auto,100%;
    mask-composite: exclude;
}

各プロパティの詳細は以下の通りです。

mask-image: url("mv.svg"), conic-gradient(#000 0 0);

マスク用のSVG画像（白黒ならpngでも可能）と、全面黒塗りの画像（conic-gradient）を設定。

※conic-gradientはlinear-gradient(#000,#000) でもいいです。

mask-position: calc(100% - 100px) center,0 0;

マスク用の画像の位置。SVGのほうを、右から100px＆上下中央に設定。

mask-repeat: no-repeat;

マスク用の画像をリピートしないように設定。

mask-size: 717px auto,100%;

マスク用の画像のサイズ設定。

mask-composite: exclude;

２枚の画像の重なっているところを、くり抜くように描画する設定。

※Safari15.4以降なら上記のCSSで大丈夫ですが、過去は各プロパティにベンダープレフィックスと、 -webkit-mask-composite: xor; が必要でした。

完成！

完成品のデモはこちら

まとめ

メリット：位置やサイズの調整はclip-pathより簡単

実装したい内容によって、mask-imageとclip-pathのどちらが向いているか変わってくると思いますので、どちらも試してみてください！

あわせて読みたい

【CSS clip-path】SVGを使ったクリッピングマスクの位置を右から○pxにするには CSSのclip-pathを使ったクリッピングマスクを、SVGのパスで作ることができます。しかし、レスポンシブ対応や位置の調整が難しいものです。 今回は、クリッピングマスク...