<clipPath>

<clipPath> SVG 元素定义了一个剪辑路径,供 clip-path 属性使用。

剪辑路径限制了可以应用绘制的区域。从概念上讲,绘制中位于剪辑路径边界区域之外的部分不会被绘制。

示例

html
<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>
css
/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

剪辑路径在概念上等效于引用元素的自定义视口。因此,它会影响元素的渲染,但不会影响元素的固有几何形状。被剪辑元素(即,通过 clip-path 属性或引用元素的子元素引用 <clipPath> 元素的元素)的边界框必须保持与未被剪辑时相同。

默认情况下,在剪辑区域上不会分派 pointer-events。例如,半径为 10 的圆被剪辑到半径为 5 的圆,则在较小半径之外将不会接收“点击”事件。

属性

clipPathUnits

定义 <clipPath> 元素内容的坐标系。值类型userSpaceOnUse|objectBoundingBox默认值userSpaceOnUse可动画

使用上下文

类别
允许的内容任意数量的以下元素,以任意顺序
动画元素
描述性元素
形状元素
<text><use>

规范

规范
CSS 遮罩模块级别 1
# ClipPathElement

浏览器兼容性

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