已废弃
该特性已经从 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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

规范

规范 状态 备注
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

文档标签和贡献者

标签: 
此页面的贡献者: mdnwebdocs-bot, RainSlide, fanxiaojie
最后编辑者: mdnwebdocs-bot,