<clipPath> - SVG: Scalable Vector Graphics 编辑

The <clipPath> SVG element defines a clipping path, to be used by the clip-path property.

A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.

html,body,svg { height:100% }
<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)" 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;
}

A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element's inherent geometry. The bounding box of a clipped element (meaning, an element which references a <clipPath> element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped.

By default, pointer-events are not dispatched on clipped regions. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive "click" events outside the smaller radius.

Attributes

clipPathUnits
Defines the coordinate system for the contents of the <clipPath> element.
Value typeuserSpaceOnUse|objectBoundingBox ; Default value: userSpaceOnUse; Animatable: yes

Global attributes

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

Usage notes

CategoriesNone
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
<text>, <use>

Specifications

SpecificationStatusComment
CSS Masking Module Level 1
The definition of '<clipPath>' in that specification.
Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<clipPath>' in that specification.
RecommendationInitial definition

Browser compatibility

BCD tables only load in the browser

Related

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:93 次

字数:8275

最后编辑:7 年前

编辑次数:0 次

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文