SVG.js Mask覆盖和ClipPath裁剪

Posted 2020-09-07 天马3798

一、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 图片加载