SVG 剪切

发表于 更新于 分类于 ， ， ， 阅读次数：

擦除已经创建的元素的部分内容。

clipPath用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。

  • 示例：
1
2
3
4
5
6
7
8
9
10
11
12
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
  • 成品展示：