CSS - mask-origin

概要

属性名	mask-origin
値	<mask-origin>#
値の詳細	<mask-origin> = content-box \| padding-box \| border-box \| fill-box \| stroke-box \| view-box
初期値	border-box
適用可能要素	すべての要素。SVG においては <defs> 要素を除くコンテナ要素、グラフィック要素、および、<use> 要素
継承	継承しない
サポート	https://caniuse.com/mdn-css_properties_mask-origin

マスクイメージの開始位置を指定します。詳細は CSSマスクを参照してください。

content-box: コンテンツボックスからの相対位置に表示します。
padding-box: パディングボックスからの相対位置に表示します。
border-box: ボーダーボックスからの相対位置に表示します。
fill-box: オブジェクトバウンディングボックスからの相対位置に表示します。SVG で使用できます。
stroke-box: ストロークバウンディングボックスからの相対位置に表示します。SVG で使用できます。
view-box: 直近の SVG ビューポートを参照ボックスとします。SVG ビューポートに viewBox 属性が指定されている場合、viewBox 属性の座標システムの原点に配置し、viewBox の横幅と高さを適用します。

margin-box は仕様から削除されました。mask-image で複数の画像を指定している場合は、mask-origin にもカンマ(,)区切りで複数の値を指定することができます。

CSS

mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;

初版：2024年12月29日、最終更新：2024年12月29日

https://www.tohoho-web.com/css/prop/mask-origin.htm