clip
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
clip 属性は、要素の表示領域を定義します。代わりに clip-path を使用してください。
メモ:
プレゼンテーション属性であるため、 clip には対応する CSS プロパティの clip があります。両方が指定された場合、 CSS プロパティの方が優先されます。
この属性は、CSS の clip プロパティで定義されているのと同じ引数値を取ります。 rect() の座標値には、現在のユーザー座標を示す単位のない値を使用することができます。値 auto は、指定された要素によって作成されたビューポートの境界に沿ってクリップパスを定義します。
この属性は、以下の SVG 要素で使用することができます。
例
html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
<!-- Auto clipping -->
<svg x="0" width="10" height="10" clip="auto">
<circle cx="5" cy="5" r="4" stroke="green" />
</svg>
<!-- Rect(top, right, bottom, left) clipping -->
<svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
<circle cx="5" cy="5" r="4" stroke="green" />
</svg>
</svg>
使用上のメモ
| 値 | auto | rect() |
|---|---|
| 既定値 | auto |
| アニメーション | 可 |
値 auto は、指定された要素によって作成されたビューポートの境界に沿ってクリップパスを定義します。値 rect() はクリップ長方形を定義し、 rect(<top>, <right>, <bottom>, <left>) の構文を取ります。 <top> および <bottom> の値は、要素のビューポートの上境界線からのオフセットを指定し、<right> および <left> は、要素のビューポートの左境界線からのオフセットを指定します。
仕様書
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |
ブラウザーの互換性
Loading…