Notas de estudo - Métodos relacionados de elementos máscara e clipPath em SVG.js

Mascarar()

1）máscara()

Exibe o conteúdo coberto pelo elemento máscara no elemento

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

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

rect.maskWith(mask)

Mas vários elementos também podem ser usados:

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）máscaraCom()

A maneira mais fácil de mascarar é com um único elemento:

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

rect.maskWith(ellipse)

Se quiser que o objeto de máscara seja renderizado em 100%, você precisa definir a cor de preenchimento do objeto de máscara como branco. Mas você também pode precisar usar gradientes:

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

Um elemento pode ser desmascarado usando o método unmask():

rect.unmask()

4）mask.remove()

Remover completamente a máscara também desbloqueará o elemento usando a máscara:

mask.remove()

5）elemento.masker()

Por conveniência, o elemento máscara também é referenciado dentro do elemento máscara. Isto é útil nos casos em que você deseja alterar a máscara:

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

ClipPath()

O elemento clipPath funciona exatamente como o elemento máscara. A única diferença é que o elemento clipPath assumirá a geometria do elemento clipPath. Portanto, o evento só é acionado quando o elemento clipPath é inserido, enquanto com a máscara o elemento máscara dispara o evento. Outra diferença é que uma máscara pode definir a opacidade com sua cor de preenchimento, enquanto um clipPath não.

1) clipe()

Clipe com vários elementos:

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

Os elementos podem ser liberados usando o método unclip():

rect.unclip()

4）element.remove()

Ao mesmo tempo, remover o clipe também irá soltar() todos os elementos cortados:

clip.remove()

5）element.clipper()

Por conveniência, o elemento de recorte também é referenciado no elemento de recorte. Isso é útil quando você deseja alterar o clipPath:

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

Explicação em vídeo

Explicação em vídeo