clip

已弃用： 此功能不再推荐。尽管一些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被弃用，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表格，以指导您的决策。请注意，此功能可能随时停止工作。

clip 属性是一个表示属性，用于定义元素的可见区域。

此属性具有与 CSS clip 属性定义相同的参数值。在 rect() 上的坐标值允许使用无单位值，这些值表示当前用户坐标。auto 值沿着给定元素创建的视口的边界定义裁剪路径。

您可以将此属性与以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

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

使用说明

警告： 此属性已弃用。请改用 clip-path。

值	`auto` \| `rect()`
默认值	`auto`
可动画	是

auto 值沿着给定元素创建的视口的边界定义裁剪路径。rect() 值定义一个遵循以下语法的裁剪矩形：rect(<top>, <right>, <bottom>, <left>)。<top> 和 <bottom> 值指定从元素视口的上边框边缘开始的偏移量，而 <right> 和 <left> 值指定从元素视口的左边框边缘开始的偏移量。

规范

规范
CSS 蒙版模块级别 1 # clip 属性

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。