clippath

<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语境

属性

全局属性

• 条件处理属性

具体属性

• 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>

结果

​

规范

浏览器兼容性