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

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)

视频讲解

视频讲解