【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);
}

実装

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

mask-imageは今のところChrome（と少し前のSafari）でベンダープレフィックスが必要で、細かい効き具合がChrome、Safari、Firefoxで変わってくるため、使うときは慎重にブラウザチェックしましょう。

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);

    /* ▼ 以下がマスク用 */
    -webkit-mask-image: url("mv-mask.svg"), -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
    -webkit-mask-position: calc(100% - 100px) center,0 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 717px auto,100%;
    /*ff*/
    mask-composite: exclude;
    /*chrome, safari*/
    -webkit-mask-composite: xor;
}

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

-webkit-mask-image: url("mv-mask.svg"), -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));

マスク用のSVG画像（白黒ならpngでも可能）と、全面黒塗りの画像（linear-gradient）を設定。
※-webkit- のプロパティ内で使うため、 -webkit-gradient にしていますが、linear-gradient(#000,#000)でも動作するかも。

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

マスク用の画像の位置。SVGのほうを、右から100px＆上下中央に設定。
※ Chromeだと 「right 100px center」 でも動作しましたが、Safariで動作品そうだったのでcalc()を使いました。

-webkit-mask-repeat: no-repeat;

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

-webkit-mask-size: 717px auto,100%;

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

mask-composite: exclude;

Firefox用。２枚の画像の重なっているところをくり抜く設定。

-webkit-mask-composite: xor;

Chrome、Safari用。2枚の画像の重なっているところをくり抜く設定。
※「destination-out」でもよさそうでしたが、Safariで動作せず「xor」に。

完成！

完成品のデモはこちら

まとめ

デメリット：ベンダープレフィックスが必要なブラウザが多く、実装がまだ不安定

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

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

あわせて読みたい

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