マスクの使い方 (clipPath / mask) [SVG]

マスク

参考：

クリッピングとマスキング | MDN

使い方

参考：

画像の合成 | defghi1977

SVG を使って、HTML 要素を mask / clip する – Qiita

クリッピングとマスクの使い方／キラキラのパスの打ち方 | レアカードの Web デザイン日記 (archive)

Masking vs Clipping: When to Use Each | CSS-Tricks

A Comprehensive Guide to Clipping and Masking in SVG | Envato Tuts+

How to use CSS and SVG clipping and masking techniques | Flywheel

CSS & SVG Masks (Test Cases) | Vincent De Oliveira

Apply effects to images with CSS’s mask-image property | web.dev

clipPath

参考：

SVG を使ったクリッピングマスク | Design memo

クリッピングマスクにチャレンジ！静止画像も動画も、SVG で切り抜こう！ | Web クリエイターボックス

Cutting out the inner part of an element using clip-path | CSS-Tricks

Clipping in CSS and SVG | Sara Soueidan

clip-path | Codrops CSS Reference

Reverse clip path with blend modes | CodePen

clipPath | MDN

mask

mask-type に応じて画像をマスクする。

• luminance：相対輝度によって画像を透過させて表示する。黒 → 0%、白 → 100%。(デフォルト)
• alpha：アルファ値によって画像を透過させて表示する。

参考：

mask マスキング | プログラミング入門レシピ

マスク要素 (コンテナ要素) | 集の一期一会

mask | MDN

mask | CSS Masking Module Level 1

invert SVG clip (show only outside path) – Stack Overflow

mask-type

mask 要素の透過タイプを指定する。

• luminance：相対輝度によってマスクの透過度が決まる。(デフォルト／黒 → 0%、白 → 100%)
• alpha：アルファ値によって透過度が決まる。

参考：

mask-type | Codrops CSS Reference

mask-type | MDN

Relative Luminance – Wikipedia

mask-image

.scope {
    mask-image: url(mask.svg#area);
}Code language: CSS (css)

参考：

mask-image | CSSリファレンス

mask-size | CSSリファレンス

mask-image を使って文字や背景にテクスチャを適用してみよう | HTML CSS javascript のまとめ

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

mask-image | MDN

mask-image | Codrops CSS Reference

Masking in the Browser with CSS and SVG | SitePoint

Masking Images in CSS Using the mask-image Property | Alligator.io

mask-mode

mask-type と同じ意味の同じ値を取る。SVG においては mask-type が優先される。

参考：

mask-mode | Codrops CSS Reference

maskUnits

参考：

maskUnits | MDN

リファレンス

参考：

CSS マスク | MDN

Can I Use

参考：

SVG Element: mask | Can I Use Support Tables

SVG Element: clipPath | Can I Use Support Tables

CSS Masks | Can I Use Support Tables

サンプル

参考：

CSS and SVG Masks | CodePen

Content placeholder SVG clip-path | CodePen

Horizon.io Demo | CodePen

規格

参考：

クリッピング, マスキング, 組成法 | SVG 1.1 第2版 (triple-underscore.github.io)

Clipping, Masking and Compositing | SVG 1.1 Second Edition (w3.org)

CSS Masking Module Level 1 | W3C

ツール

参考：

Clippy – CSS clip-path maker

Clip Path Generator | CSS Plant