CSS3

プロパティ

mask-clip

→●、mdn

マスク法区画。

mask-clip は、mask 要素を参照しないマスク層画像用の マスク塗り区画 を決定する ― それは、マスクが影響する区画を決定する。要素を成す塗られる内容は、この区画に制約するものとする。

mask-clip プロパティは、mask 要素を参照するマスク層画像には 影響しない。そのようなマスク参照用のマスク塗り区画は、mask 要素上の［x●、y●、width●、height●、maskUnits●］属性により決定される。

<geometry-box>

塗られる内容は、指定されたキーワードによる基準ボックスに制約される（切り抜かれる）

<geometry-box> 値に対する使用値は：

• CSS レイアウト ボックスが結び付けられていない SVG 要素においては：
  ［content-box／padding-box］に対しては fill-box になり、［border-box／margin-box］に対しては stroke-box になる。
• CSS レイアウト ボックスが結び付けられている要素においては：
  fill-box に対しては content-box になり、［stroke-box／view-box］に対しては border-box になる。

content-box

<DIV style="width:100px; height:100px;
 margin:20px;
 border:1px solid red;
 padding:20px;
 background-color:#8cffa0;
 -webkit-mask-image:url(Com/SVG.svg);
 -webkit-mask-size:100% 100%;
 -webkit-mask-clip:border-box;
 mask-image:url(Com/SVG.svg);
 mask-size:100% 100%;
 mask-clip:border-box;
">ああああ</DIV>

¶

padding-box

border-box

margin-box

fill-box

stroke-box

view-box

<DIV style="border:1px solid red; width:300px; height:300px;
 margin:10px; padding:10px;
 background-color:#fee;
 mask-clip:content-box;
 mask-image:url(Com/SVG.svg);
">あ</DIV>

<IMG src="Com/SVG.svg">

no-clip

塗られる内容は、制約されない（切り抜かれない）。

mask-clip 値を成すカンマで分離された値たちが、どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。