var draw = SVG('svg1').size(300, 300);

//SVG.Mask 覆盖物设置

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

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

//添加到矩形 maskWith()

var rect = draw.rect(100, 100);

rect.maskWith(mask);

//获取mask对象

var mask2 = rect.masker.fill('#fff');

console.info(mask2); //获取形状的SVG.Mask 对象

//mask2.fill('#000');

//删除 mask对象

//mask2.remove();

//删除指定形状的mask内容

//rect.unmask();

var draw = SVG('svg1').size(300, 300);

//SVG.Mask 覆盖物设置，mask()创建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: 'red' });

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

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

var rect = draw.rect(200, 200);

rect.maskWith(mask);

var draw = SVG('svg1').size(300, 300);

//SVG.Mask 覆盖物设置,mask的颜色会在原有颜色的基础上混合

var circle = draw.circle(50).fill('#fff');

var mask = draw.mask();

mask.add(circle.center(35, 35));

mask.add(circle.clone().center(70, 70).size(70).fill('#ccc'));

mask.add(circle.clone().center(105, 115).size(50).fill('#333'));

var rect = draw.rect(200, 200).move(20, 20).fill('#f06');

rect.maskWith(mask);

//绑定事件

rect.on('mouseover', function () {

    this.animate(300, '<>').fill('#0f9');

});

rect.on('mouseout', function () {

    this.animate(300, '<>').fill('#f06');

});

//SVG.Mask 覆盖物设置,maskWith() 使用其他元素覆盖

var gradient = draw.gradient('linear', function (stop) {

    stop.at({ offset: 0, color: '#000' });

    stop.at({ offset: 1, color: '#fff' });

})

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

var rect = draw.rect(200, 200);

rect.maskWith(ellipse);

var draw = SVG('svg1').size(300, 300);

//SVG.ClipPath 裁剪元素

//重叠的部分会覆盖掉

//裁剪元素和掩蔽元素完全相同。唯一不同的是裁剪元素将采用裁剪元素的几何结构。因此，只有在输入裁剪元素时才触发事件，而用掩码将屏蔽元素触发事件。另一个区别是，面具可以定义透明度与填充色和clippaths不行。

//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(ellipse).add(text);

var rect=draw.rect(200,200);

//clipWith() 将裁剪绑定到图形

rect.clipWith(clip);

//获取clipPath对象

rect.clipper.move(10, 10);

//删除clipPath对象

clip.remove()

//清除指定图形的裁剪

rect.unclip();

var draw = SVG('svg1').size(300, 300);

var circle = draw.circle(50).fill('#fff');

var clip = draw.clip();

clip.add(circle.center(35, 35));

clip.add(circle.clone().center(70, 70).size(70).fill('#ccc'))

clip.add(circle.clone().center(90, 30).size(30).fill('#999'))

clip.add(circle.clone().center(105, 115).size(50).fill('#333'))

var rect = draw.rect(100, 100).move(20, 20).fill('#f06')

rect.clipWith(clip)

//绑定的事件，只有鼠标进入图形中才会触发，而不是进入元素范围

rect.on('mouseover', function () {

    this.animate(300, '<>').fill('#0f9')

})

rect.on('mouseout', function () {

    this.animate(300, '<>').fill('#f06')

})