一、SVG.Gradient

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

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' })//修改 起始位置，結(jié)束為止 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() 設(shè)置徑向漸變的最外層半徑 gradient.from(0, 0).to(1, 1).radius(0.5);

二、SVG.Stop

1.修改stop元素，修改Gradient內(nèi)容

var draw = SVG('svg1').size(300, 300); //SVG.Stop var s1, s2, s3 var gradient = draw.gradient('radial', function (stop) {//stop.at() //設(shè)置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() 修改漸變內(nèi)容 //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 基礎(chǔ)圖形繪制整理（二）

總結(jié)

以上是生活随笔為你收集整理的SVG.js 颜色渐变使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。