个性化阅读
专注于IT技术分析

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) 打赏
未经允许不得转载:srcmini » SVG剪切路径clipPath用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏