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 圖片加載