Svg.js 圖片加載

一.SVG.Image

1.創建和修改圖片

var draw = SVG('svg1').size(300, 300);
//SVG.Image 加載圖片文件
var image = draw.image('../Scripts/36.jpg');
//指定圖片的大小
//默認情況下，圖片按原比例縮放
var image = draw.image('../Scripts/36.jpg', 200, 300);
image.stroke({
    width: 2,
    color: 'blue'
}).size(100, 100);
//修改圖片內容
image.load('../Scripts/tool.png');

2.圖片加載成功事件

var draw = SVG('svg1').size(300, 300);
//SVG.Image  綁定加載成功事件
var image = draw.image('../Scripts/36.jpg').loaded(function (loader) {
    console.info(loader);
    draw.animate(300).size(loader.width, loader.height);
});

//使用動畫
var image = draw.image('../Scripts/tool.png').loaded(function (loader) {
    var text = draw.text(loader.url);
    text.move(0, loader.height);
    text.tspan('寬度：' + loader.width)
        .newLine()
        .tspan('高度：' + loader.height);

    image.animate(3000).size(loader.width * 2, loader.height * 2).loop(true, true);
});

loader數據對象如下

 

更多：

SVG.js 文本繪制整理

SVG.js 基礎圖形繪制整理（二）

SVG.js 基礎圖形繪制整理（一）