SVG.js Mask覆盖和ClipPath裁剪

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

更多：

SVG.js 图案使用和use引用

SVG.js 颜色渐变使用

Svg.js 图片加载