学习笔记——SVG.js中的渐变元素和pattern元素的相关方法

Gradient()

1）gradient()

有线性和径向梯度。线性梯度可以这样创建：

var gradient = draw.gradient('linear', function(add) {
  add.stop(0, '#333')
  add.stop(1, '#fff')
})
var rect = draw.rect(400, 400)
rect.attr({ fill: gradient })
或者
rect.fill(gradient)

2）gradient.stop()

stop需要偏移和颜色参数，不透明度是可选的。偏移量是介于0和1之间的浮动值或百分比值（例如33%）。

gradient.stop(0, '#333')
gradient.stop({ offset: 0, color: '#333', opacity: 1 })

3）gradient.url()

返回调用的渐变元素的id地址

gradient.url() //-> returns 'url(#SvgjsGradient1234)'

4）gradient.from()/to()

定义渐变色开始到结束的位置：

gradient.from(0, 0).to(0, 1)

from和to值也以百分比表示。

5）gradient.get()

get（）方法使从现有渐变获得stop变得更加容易：

var gradient = draw.gradient('radial', function(add) {
  add.stop({ offset: 0, color: '#000', opacity: 1 })   // -> first
  add.stop({ offset: 0.5, color: '#f03', opacity: 1 }) // -> second
  add.stop({ offset: 1, color: '#066', opacity: 1 })   // -> third
})

var s1 = gradient.get(0) // -> returns "first" stop

6）gradient.update()

用于更新渐变

gradient.update(function(add) {
  add.stop(0.1, '#333', 0.2)
  add.stop(0.9, '#f03', 1)
})

7）gradient.radius()

径向渐变有一个radius（）方法来定义内部颜色应延伸的最外半径：

var gradient = draw.gradient('radial', function(add) {
  add.stop(0, '#333')
  add.stop(1, '#fff')
})

gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

Stop()

1）stop()

stop元素只可以在gradient元素中使用

var stop = gradient.stop(0.5, '#f03')
var stop = gradient.stop({ offset: 0.5, color: '#f06', opacity: 1 })

2）stop.update()

采用与构造函数相同的参数。

stop.update(0, '#333')
stop.update({ offset: 0, color: '#333', opacity: 1 })

Pattern()

1）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)
})
var rect = draw.rect(400, 400).fill(pattern)

这将创建一个20 x 20像素的方格图案。可以将任何可用元素添加到图案中。
最后，要在元素上使用模式：

rect.attr({ fill: pattern })

2）pattern.url()

pattern.url() //-> returns 'url(#SvgjsPattern1234)'

3）pattern.update()

之后还可以更新模式：

pattern.update(function(add) {
  add.circle(15).center(10,10)
})

视频讲解

视频讲解