SVG剪切路径clipPath用法示例

SVG剪切路径用于根据特定路径剪切SVG形状。也称为SVG裁剪。

路径内部的形状部分是可见的, 而外部的部分则是不可见的。

例子

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

立即测试

解释

  • 现在, 你可以看到剪切路径内的圆形部分可见的其余部分都被剪切了。
  • <clipPath>元素的id属性定义剪辑路径的唯一名称。
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?