Study Notes - Related Methods of Gradient Elements and Pattern Elements in SVG.js

Gradient()

1）gradient()

There are linear and radial gradients. Linear gradients can be created like this:

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 takes offset and color parameters, opacity is optional. The offset is a float between 0 and 1 or a percentage value (eg 33%).

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

3）gradient.url()

Returns the id address of the called gradient element

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

4）gradient.from()/to()

Define where the gradient starts and ends:

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

The from and to values ​​are also expressed as percentages.

5）gradient.get()

The get() method makes it easier to get a stop from an existing gradient:

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()

for updating gradients

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

7）gradient.radius()

Radial gradients have a radius() method to define the outermost radius over which the inner color should extend:

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()

The stop element can only be used in the gradient element

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

2）stop.update()

Takes the same arguments as the constructor.

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

Pattern()

1）pattern()

Creating a pattern is very similar to creating a gradient:

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)

This will create a 20 x 20 px checkered pattern. Any available element can be added to the pattern.
Finally, to use the pattern on the element:

rect.attr({
    
     fill: pattern })

2）pattern.url()

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

3）pattern.update()

You can also update the schema afterwards:

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

Video explanation

Video explanation