SVG.js 顏色漸變使用

一、SVG.Gradient

1.線性漸變、徑向漸變，設置漸變的起始點，設置徑向漸變的外層半徑

var draw = SVG('svg1').size(300, 300);
//SVG.Gradient 漸變處理 linear、radial
//線性漸變 linear
//徑向漸變 radial
var gradient = draw.gradient('radial', function (stop) {
    stop.at(0, '#f06');
    stop.at(1, '#0f9');
});

var rect = draw.rect(100, 100);
rect.attr({ fill: gradient });
rect.stroke({ color: 'blue' })

//修改 起始位置，結束為止 gradient.from(),to()
gradient.animate(1000).from(0, 0).to(1, 1).loop(true, true);
//gradient.get()
//獲取第一個stop的Dom
var s1 = gradient.get(0);
console.info(s1);
//gradient.radius() 設置徑向漸變的最外層半徑
gradient.from(0, 0).to(1, 1).radius(0.5);

二、SVG.Stop

1.修改stop元素，修改Gradient內容

var draw = SVG('svg1').size(300, 300);
//SVG.Stop
var s1, s2, s3
var gradient = draw.gradient('radial', function (stop) {
    //stop.at() //設置stop的屬性
    s1 = stop.at(0, '#000')
    s2 = stop.at(0.5, '#f03')
    s3 = stop.at(1, '#0f9')
});
var rect = draw.rect(100, 100);
rect.fill(gradient);
//stop.update() 修改顏色值
s1.update(0.1, '#0f0', 1)

//gradient.update() 修改漸變內容
//stop.update() 
gradient.update(function (stop) {
    stop.at(0.1, '#333', 0.2);
    stop.at(0.9, '#f03', 1);
});

var draw = SVG('svg1').size(300, 300);
//SVG.Gradient 漸變處理 linear、radial
var gradient = draw.gradient('radial', function (stop) {
    // stop.at(0, '#f06');
    // stop.at(1, '#0f9');
    // at()方法指定對象
    stop.at({ offset: 0, color: '#f06', opacity: 0.5 });
    stop.at({ offset: 1, color: '#0f9', opacity: 1 });
});
var rect = draw.rect(100, 100);
rect.attr({ fill: gradient });
rect.stroke({ color: 'blue' })
rect.radius(10);

// var fill1=gradient.fill();
// console.info(fill1); //返回 radialGadient 的id的url ：url(#SvgjsRadialGradient1008)

更多：

Svg.js 圖片加載

SVG.js 文本繪制整理

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