非常教程

SVG参考手册

分类 | Elements

clippath

<clipPath>SVG元素定义剪切路径。使用clip-path属性使用/引用剪切路径。

剪切路径限制了可以应用paint的区域。从概念上讲,绘图中位于由当前活动剪切路径限定的区域之外的任何部分都未绘制。

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.

默认情况下,不得将指针事件分派到形状的剪切(不可见)区域。例如,一个半径为10的圆形被剪切成半径为5的圆形,不会在较小半径以外接收到“点击”事件。

Usage语境

分类

没有

允许的内容

任意数量的以下元素(按任意顺序):动画元素描述性元素形状元素<text>,<use>

属性

全局属性

  • 条件处理属性
  • 核心属性
  • 表现属性
  • class
  • style
  • externalResourcesRequired
  • transform

具体属性

  • clipPathUnits

DOM接口

这个元素实现了SVGClipPathElement接口。

Examples

SVG

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="myClip">
      <circle cx="30" cy="30" r="20"/>
      <circle cx="70" cy="70" r="20"/>
    </clipPath>
  </defs>

  <rect x="10" y="10" width="100" height="100"
      clip-path="url(#myClip)"/>
</svg>

<style>
svg {
  border: 3px dashed #999;
}
svg > rect:hover {
  fill: green;
}
</style>

结果

SVG

<svg width="100" height="100" >
  <defs>
    <clipPath id="myClip">
      <rect x="0" y="10" width="100" height="35" />
      <rect x="0" y="55" width="100" height="35" />
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" clip-path="url(#myClip)" />
</svg>

结果

规范

规范

状态

评论

CSS遮蔽模块级别1该规范中'<clipPath>'的定义。

候选推荐

可缩放矢量图形(SVG)1.1(第二版)该规范中'<clipPath>'的定义。

建议

初始定义

浏览器兼容性

Feature

Chrome

Edge

Firefox(Gecko)

IE

Opera

Safari

Basic support

1.0

(Yes)

1.5 (1.8)

9.0

9.0

3.0.4

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

3.0

(Yes)

1.0 (1.8)

No support

(Yes)

3.0.4

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。