clip-path

翻译不完整。 请帮助我们翻译这篇文章!

元素的表现属性 clip-path 为其定义或关联一条剪切路径。

注意:clip-path 是一个表现属性,可以作为 CSS 属性使用。

作为一种表现属性,clip-path 可以用于任何元素,不过效果最明显的是下列十九种元素:<a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use>

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>

  <!-- 左上:应用自定义的剪切路径 -->
  <rect x="1" y="1" width="8" height="8" stroke="green"
        clip-path="url(#myClip)" />
 
  <!-- 右上:应用 CSS 基本形状和 fill-box 几何。
       实质上和自定义剪切路径并把 clipPathUnits 
       设成 objectBoundingBox 一样 -->
  <rect x="11" y="1" width="8" height="8" stroke="green"
        clip-path="circle() fill-box" />
 
  <!-- 左下 -->
  <rect x="1" y="11" width="8" height="8" stroke="green"
        clip-path="circle() stroke-box" />

  <!-- 右下:应用CSS基本形状和 view-box 几何。
       实质上和自定义剪切路径并把 clipPathUnits
       设成 userSpaceOnUse 一样 -->
  <rect x="11" y="11" width="8" height="8" stroke="green"
        clip-path="circle() view-box" />
</svg>

Usage notes

url | [ basic-shape || <geometry-box> ] | none
默认值 none
Animatable
<geometry-box>
geometry-box 是应用 basic-shape 的额外信息,用于区分 CSS 基本形状如何应用于元素上:fill-box 表示将对象的包围框作为参照框;stroke-box 表示将对象的包围框加上描边的范围作为参照框;view-box 表示使用最近的 SVG 视窗作为参照框。

注意:clip-path 语法的更多细节可参考 CSS 属性 clip-path 的参考页面。

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
clip-pathChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

Specifications

Specification Status Comment
CSS Masking Module Level 1
clip-path
Candidate Recommendation Extends its application to HTML elements. The clip-path property replaces the deprecated clip property.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
clip-path
Recommendation Initial definition (applies to SVG elements only).

See also