Notas de estudio: métodos relacionados de elementos de degradado y elementos de patrón en SVG.js

Degradado()

1）gradiente()

Hay gradientes lineales y radiales. Los degradados lineales se pueden crear así:

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）gradiente.parada()

stop toma parámetros de desplazamiento y color, la opacidad es opcional. El desplazamiento es un valor flotante entre 0 y 1 o un valor porcentual (por ejemplo, 33%).

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

3）gradiente.url()

Devuelve la dirección de identificación del elemento degradado llamado

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

4）gradiente.de()/a()

Defina dónde comienza y termina el degradado:

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

Los valores desde y hasta también se expresan como porcentajes.

5）gradiente.get()

El método get() hace que sea más fácil detener un gradiente existente:

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）gradiente.actualización()

para actualizar gradientes

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

7）gradiente.radio()

Los degradados radiales tienen un método radio() para definir el radio más externo sobre el cual debe extenderse el color interior:

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)

Detener()

1）parar()

El elemento de parada solo se puede utilizar en el elemento degradado.

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

2）detener.actualizar()

Toma los mismos argumentos que el constructor.

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

Patrón()

1）patrón()

Crear un patrón es muy similar a crear un degradado:

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)

Esto creará un patrón a cuadros de 20 x 20 px. Cualquier elemento disponible se puede agregar al patrón.
Finalmente, para usar el patrón en el elemento:

rect.attr({
    
     fill: pattern })

2）patrón.url()

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

3）patrón.actualización()

También puedes actualizar el esquema después:

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

Vídeo explicativo

Vídeo explicativo