clip - SVG 编辑

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

html,body,svg { height:100% }

<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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

规范

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