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
为 <clipPath> 元素的内容定义坐标系。
Value typeuserSpaceOnUse|objectBoundingBox ; Default valueuserSpaceOnUseAnimatableyes

全局属性

Core Attributes
Most notably: id
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Presentation Attributes
Most notably: clip-path, clip-rule, 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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
clipPathChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 9Safari Full support 3WebView Android Full support 3Chrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes
clipPathUnitsChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support Yes

Legend

Full support  
Full support

相关内容