您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!
SVG 元素 <clipPath>
指定可绘制区域。 A clipping path is used/referenced using the clip-path
property.
从概念上来说,当绘制的图形超出了剪切路径所指定的区域,超出区域的部分将不会被绘制。
The clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn.
html,body,svg { height:100% }
<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>
/* 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 元素,这个元素和它的子元素就是被剪切的元素)必须保持原样,就如它没有被剪切。
默认情况下,一个形状,其被剪切掉的区域(不可见的区域)是不响应鼠标事件的。举个例子,如果一个半径为10的圆形被剪切成半径为5的圆形,那么这个圆在半径为5以外的区域是不能接收“click”事件的。
属性
clipPathUnits
- This attribute defines the coordinate system for the contents of the
<clipPath>
element.
Value type:userSpaceOnUse
|objectBoundingBox
; Default value:userSpaceOnUse
; Animatable: yes
全局属性
- 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 |
浏览器兼容性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clipPath | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support 3 | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
clipPathUnits | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE Full support 9 | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
相关内容
- Other clipping and masking SVG elements:
<mask>
- Some CSS properties:
clip-path
,pointer-events