SVG <clipPath> 元素

SVG <clipPath>元素用于根据特定路径剪切SVG形状。也称为SVG裁剪。路径内部的形状部分是可见的,而外部的部分则是不可见的。

在线示例

以下示例使用clipPath绘制一个蓝色扇形。

<svg height="450" width="450">
  <defs>
      <clipPath id="clip">
          <rect x="15" y="15" width="40" height="40" />
      </clipPath>
  </defs>

  <circle cx="25" cy="25" r="30"
          style="fill: #0000ff; clip-path: url(#clip); " />
</svg>
测试看看‹/›

运行效果如下:

用法解释

  • 现在,您可以看到剪切路径内的圆形部分可见的其余部分已被剪切。

  • <clipPath>元素的id属性定义剪辑路径的唯一名称。

更多在线示例

以下示例使用clipPath绘制一个爱心图形:

<style>
svg{width:40%;height:30%}
@keyframes openYourHeart {from {r: 0} to {r: 60px}}
#myClip circle {
  animation: openYourHeart 15s infinite;
}
</style>
<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      圆圈外的所有东西都会被裁剪掉,因此不可见。
    -->
    <circle cx="40" cy="35" r="35"></circle>
  </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"></path>
 
  <!--
    只有位于黑色心形内的那一部分红色圆形是可见的;
    随着圆变大,它将逐渐变为一个红色心形。
  -->
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red"></use>
</svg>
测试看看 ‹/›

运行后效果如下: