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)