clip-path

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

 

<clip-source>

用 <url> 表示剪切元素的路径

<basic-shape>

一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框

<geometry-box>

如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）。几何框盒可以有以下的值中的一个：

margin-box

使用 margin box 作为引用框。

border-box

使用 border box 作为引用框。

padding-box

使用 padding box 作为引用框。

content-box

使用 content box 作为引用框。

fill-box

利用对象边界框作为引用框。

stroke-box

使用笔触边界框（stroke bounding box）作为引用框

view-box

使用最近的 SVG 视口（viewport）作为引用框。如果viewBox 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。

none

不创建的剪切路径。

 

HTML 与 SVG 之间的对比

 

完整示例

html

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
</select>

css

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}