已废弃
该特性已经从 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
规范
规范 | 状态 | 备注 |
---|---|---|
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 |