学习笔记——SVG.js中的mask和clipPath元素的相关方法

本文链接：https://blog.youkuaiyun.com/qq_41339126/article/details/130659891

本文介绍了SVG.JS库中如何使用mask和clipPath进行图形处理。mask()方法用于显示被遮罩元素的内容，maskWith()用于指定遮罩元素。同时，文章提到了使用多个元素创建复杂遮罩，以及如何应用渐变填充。对于clipPath，它基于几何结构进行剪裁，不涉及不透明度。clip()和clipWith()方法分别用于创建和应用剪裁路径，而unmask()和unclip()用于取消遮罩和剪裁效果。element.masker()和element.clipper()提供了方便地修改已有遮罩和剪裁路径的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Mask()

1）mask()

显示元素中mask元素遮住的内容

var ellipse = draw.ellipse(80, 40).move(10, 10).fill('#fff')

var mask = draw.mask().add(ellipse)

rect.maskWith(mask)

但也可以使用多个元素：

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 }).fill({ color: '#fff' })

var mask = draw.mask().add(text).add(ellipse)

rect.maskWith(mask)

2）maskWith()

mask的最简单方法是使用单个元素：

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })

rect.maskWith(ellipse)

如果希望mask对象以100%渲染，则需要将mask对象的填充颜色设置为白色。但您可能还需要使用渐变：

var gradient = draw.gradient('linear', function(add) {
  add.stop({ offset: 0, color: '#000' })
  add.stop({ offset: 1, color: '#fff' })
})

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: gradient })

rect.maskWith(ellipse)

3）element.unmask()

可以使用unmask（）方法来取消对元素的屏蔽：

rect.unmask()

4）mask.remove()

完全移除mask还将解除对使用mask元素的屏蔽：

mask.remove()

5）element.masker()

为了方便起见，mask元素也在mask元素中引用。这在您想要更改mask的情况下非常有用：

rect.masker().fill('#fff')

ClipPath()

clipPath元素的工作原理与mask元素完全相同。唯一的区别是clipPath元素将采用clipPath元素的几何结构。因此，事件仅在进入clipPath元素时触发，而使用mask时，mask元素触发事件。另一个区别是mask可以用其填充颜色定义不透明度，而clipPath不能。

1）clip()

具有多个元素的剪辑：

var ellipse = draw.ellipse(80, 40).move(10, 10)
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 })

var clip = draw.clip().add(text).add(ellipse)

rect.clipWith(clip)

2）clipWith()

var ellipse = draw.ellipse(80, 40).move(10, 10)

rect.clipWith(ellipse)

3）element.unclip()

可以使用unclip（）方法松开元素：

rect.unclip()

4）element.remove()

同时移除clip也会松开（）所有被clip的元素：

clip.remove()

5）element.clipper()

为了方便起见，剪裁元素也在剪裁元素中引用。这在您想要更改clipPath时非常有用：

rect.clipper().move(10, 10)