clip
Deprecated
Avoid using this feature in new projects. SVG 2 omittted some parts of SVG 1.1 to "improv[e] the usability and precision of the language." This feature may be a candidate for removal from web standards or browsers.
Consider using the following features instead: SVGまたは@font-face.
clip 属性は、要素の表示領域を定義します。代わりに clip-path を使用してください。
メモ:
プレゼンテーション属性であるため、 clip には対応する CSS プロパティの clip があります。両方が指定された場合、 CSS プロパティの方が優先されます。
この属性は、CSS の clip プロパティで定義されているのと同じ引数値を取ります。 rect() の座標値には、現在のユーザー座標を示す単位のない値を使用することができます。値 auto は、指定された要素によって作成されたビューポートの境界に沿ってクリップパスを定義します。
この属性は、以下の SVG 要素で使用することができます。
例
<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> は、要素のビューポートの左境界線からのオフセットを指定します。
仕様書
| 仕様書 |
|---|
| CSS Masking Module Level 1 # clip-property |