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 基础图形绘制整理（二）