パラメータ | 詳細 |
---|---|
クリップソース | インラインSVG要素(または)クリップパスの定義を含む外部ファイル内のSVG要素を指すURL。 |
基本形状 | inset() 、 circle() 、 ellipse() またはpolygon() いずれかをpolygon() ます。これらの関数の1つを使用して、クリッピングパスが定義されます。これらのシェイプ関数は、 浮動小数点型のシェイプとまったく同じように機能します |
クリップジオメトリボックス | これは、 content-box 、 padding-box 、 border-box 、 margin-box 、 fill-box 、 stroke-box 、 view-box を値として持つことができます。 <basic-shape>に値を指定せずにこれを指定すると、対応するボックスの端がクリッピングのパスとして使用されます。 <basic-shape>とともに使用すると、これはシェイプの参照ボックスとして機能します。 |
マスク参照 | これは、マスクイメージソースへの参照URLまたはイメージでなくてnone 。 |
リピートスタイル | これは、X軸とY軸でマスクをどのように繰り返すかタイルするかを指定します。サポートされている値は、 repeat-x 、 repeat-y 、 repeat 、 space 、 round 、 no-repeat です。 |
マスクモード | alpha またはluminance またはauto ことができ、マスクをアルファマスクまたはルミナンスマスクとして扱うべきかどうかを示します。値が指定されておらず、マスク参照がダイレクト・イメージの場合、アルファ・マスク(または)と見なされます。マスク参照がURLの場合はルミナンス・マスクと見なされます。 |
ポジション | これは、各マスクレイヤーの位置を指定し、 background-position プロパティーと動作が似ています。値は、1つの値構文( top 、 10% )または2値構文( top right 、 50% 50% )で指定できます。 |
ジオメトリボックス | プロパティに応じて、 マスクをクリッピングするボックス( マスク塗りつぶし領域 )またはマスクの原点( マスク位置決め領域 )の参照として使用するボックスを指定します。可能な値のリストは、 content-box 、 padding-box 、 border-box 、 margin-box 、 fill-box 、 stroke-box 、 view-box です。これらの各値がどのように機能するかについての詳細な説明は、 W3C仕様書に記載されています。 |
bg-size | これは各マスク画像レイヤーのサイズを表し、 background-size と同じ構文を持っています。値は、長さまたはパーセンテージ、またはautoまたはcoverまたはcontainsです。長さ、パーセンテージ、および自動は、単一の値として、または各軸の1つとして提供することができます。 |
合成オペレータ | これは、レイヤーごとのadd 、 subtract 、 exclude 、 multiply うちのいずれか1つで、このレイヤーで使用する合成操作のタイプをそのレイヤーで定義します。各値の詳細については、 W3Cの仕様書を参照してください 。 |
CSSのクリッピングとマスキングは非常に新しいコンセプトなので、これらのプロパティのブラウザサポートはかなり低いです。
執筆時点(7月16日)のように、Chrome、Safari、Operaはこれらのプロパティを-webkit-
接頭辞でサポートして-webkit-
ます。
Firefoxは接頭辞を必要としませんが、SVG mask
要素で使用する場合にのみマスクをサポートします。インラインSVG mask
要素の場合、構文はmask: url(#msk)
一方、外部SVGファイルのmask
要素を使用する場合、構文はmask: url('yourfilepath/yourfilename.svg#msk')
です。両方の場合の#msk
は、参照されているmask
要素のid
を参照します。 この回答に示されているように、現在のところ、Firefoxではmask
プロパティのmask
mask-reference
以外のパラメータはサポートされていません。
Internet Explorer(およびEdge)はまだこのプロパティをサポートしていません。
mask-mode
プロパティは現在、接頭辞付きまたは接頭辞なしのブラウザではサポートされていません。
現時点(7月16日)のChrome(Safari、Opera)では、基本的なシェイプ( circle
、 polygon
)またはインラインSVGのurl(#clipper)
構文を使用してパスを作成するときに、 clip-path
サポートしていclip-path
。外部SVGファイルの一部であるシェイプに基づいてクリッピングをサポートしていません。また、 -webkit
接頭辞が必要です。
Firefoxはclip-path
のurl()
構文のみをサポートしていclip-path
、Internet Explorer(およびEdge)はサポートしていません。