SVG.js 圖案使用和use引用

一.SVG.Pattern 圖案設置

var draw = SVG('svg1').size(300, 300);
//SVG.Pattern 圖案設置
var pattern = draw.pattern(20, 20, function (add) {
    add.rect(20, 20).fill('#f06');
    add.rect(10, 10);
    add.rect(10, 10).move(10, 10);
});
//獲取url的標識對象,returns 'url(#SvgjsPattern1234)'
var urlObj = pattern.fill();
console.info(urlObj); //url(#SvgjsPattern1008)

//為圓設置圖案,fill() 方法設置或獲取圖片對象
var circle = draw.circle(100);
circle.move(100, 100)
    .fill(pattern);
//為矩形設置圖案
var rect = draw.rect(100, 100);
rect.attr({ fill: pattern });
//修改圖案,會覆蓋以前的圖片
pattern.update(function (add) {
    add.circle(15).center(10, 10);
});

二.SVG.Use  元素的引用

1.

//SVG.Use  元素的引用
//使用元素簡單地模擬另一個現有元素。主元素的任何更改將反映在所有使用實例上。
var rect = draw.rect(100, 100).fill('#f09');
var use = draw.use(rect);
use.move(100, 100);
//當rect修改時，use也會跟着修改
rect.animate(1000).fill('#f90');

2.SVG.defs()  的聲明定義，當use()再顯示

var draw = SVG('svg1').size(300, 300);
//SVG.defs()  的聲明定義，當use()再顯示
var rect = draw.defs().rect(100, 100).fill('#f09');
var use = draw.use(rect);
use.move(100, 100);
//當rect修改時，use也會跟着修改
rect.animate(1000).fill('#f90');

3.

var draw = SVG('svg1').size(300, 300);
//SVG.use() 使用外部文件
//這種方法是有用的，當你有復雜的圖像已經創建。
//需要注意的是，外部圖像（在你的領域）可能需要加載的文件與XHR。
var rect=draw.rect(100,100);
console.info(rect);
console.info(rect.node.id);
var use  = draw.use(rect.node.id, 'svg1.svg')

 

更多：

SVG.js 顏色漸變使用

Svg.js 圖片加載

SVG.js 文本繪制整理