一、SVG.Mask 覆盖物设置

1.

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

2.

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

3.

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');});

4.

//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);

二、SVG.ClipPath 裁剪元素

1.

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

2.

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')})

更多：