clip

已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

clip 属性是定义元素可见区域的属性。

clip 属性的参数值与 css clip property 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 <shape> 的坐标值上。auto 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。

As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignObject>, <pattern>, <marker>

<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>

用法

Warning: This property is deprecated. Use clip-path instead.

可用值	auto \| <shape> \| inherit
默认值	Yes
Animatable	Yes

The value auto defines a clipping path along the bounds of the viewport created by the given element.

The value rect() defines a clipping rectangle following the following syntax: rect(<top>, <right>, <bottom>, <left>). The <top> and <bottom> values specify offsets from the top border edge of the element viewport, while <right> and <left> specify offsets from the left border edge of the element viewport.

浏览器兼容性

BCD tables only load in the browser

规范

规范	状态	备注
CSS Masking Module Level 1 clip	Candidate Recommendation	Deprecates `clip` property, suggests `clip-path` as replacement.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) clip	Recommendation	Initial definition