clipPath

SVG 元素 <clipPath> 定义一条剪切路径,可作为其他元素的 clip-path 属性的值。

剪切路径限制了图形的可见范围。从概念上来说,如果图形超出了当前剪切路径所包围的区域,那么超出部分将不会绘制。

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      圆圈外的所有东西都会被裁剪掉,因此不可见。
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- 作为引用元素(英文原文: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" />

  <!--
    和上述黑色心形形状相同的红色心形,剪切路径是上面定义的圆;
    红色心形只有在圆内的部分可见。
  -->
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
</svg>
/* 如果浏览器支持几何属性 r,可以加一点 css */

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

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

从概念上讲,剪切路径等于给引用元素设置了一个自定义的可视区域。因此,它虽然会影响一个元素的绘制,但不会影响这个元素本身的几何形状,比如被剪切元素(通过 clip-path 属性引用了 <clipPath> 的元素及其子元素)的包围盒和没有被剪切时相同。

默认情况下,pointer-events 不会在被剪切掉的区域(不可见的区域)内触发。举个例子,如果一个半径为10的圆形被剪切成半径为5的圆形,那么这个圆在半径为5以外的区域不会收到“click”事件。

属性

clipPathUnits (en-US)
为 <clipPath> 元素的内容定义坐标系。
Value typeuserSpaceOnUse|objectBoundingBox ; Default valueuserSpaceOnUseAnimatableyes

全局属性

Core Attributes
Most notably: id
Styling Attributes
class (en-US), style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage (en-US)
Presentation Attributes
Most notably: clip-path, clip-rule (en-US), color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

用法

类别
允许的内容物任意数量、任意排序的下列元素:
动画元素
描述性元素
形状元素
<text>, <use>

规范

规范 状态 备注
CSS Masking Module Level 1
<clipPath>
Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<clipPath>
Recommendation Initial definition

浏览器兼容性

BCD tables only load in the browser

相关内容