<clipPath>
示例
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
;可动画:是
使用上下文
规范
规范 |
---|
CSS 遮罩模块级别 1 # ClipPathElement |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
相关
- 其他剪辑和遮罩 SVG 元素:
<mask>
- 一些 CSS 属性:
clip-path
、pointer-events