Notas de estudo - métodos de uso relacionados e elementos marcadores em SVG.js

Usar()

usar()

O elemento use apenas simula outro elemento existente. Quaisquer alterações no elemento mestre serão refletidas em todas as instâncias de uso. O uso de use() é muito simples:

var rect = draw.rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

No caso do exemplo acima, dois retângulos serão exibidos no desenho SVG, o retângulo original e o retângulo de instância usado. Em alguns casos, pode ser necessário ocultar o elemento original. A melhor maneira é criar o elemento original no nó defs:

var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

Dessa forma, o elemento rect atua como um elemento de biblioteca. Você pode editá-lo, mas ele não será renderizado.
Outra forma é apontar para um arquivo SVG externo, bastando especificar o id do elemento e o caminho do arquivo.

var use  = draw.use('elementId', 'path/to/file.svg')

Essa abordagem é útil quando você já criou imagens complexas.
Observe que para imagens externas (fora do seu domínio), pode ser necessário carregar o arquivo usando XHR.

Marcador()

1）marcador()

Marcadores podem ser adicionados a cada ponto individual de linhas, polilinhas, polígonos e caminhos. Existem três tipos de marcadores: início, meio e fim. Se início representa o primeiro ponto, então fim é o último ponto e meio é o ponto médio.

var path = draw.path('M0 0 A50 50 0 0 1 50 50 A50 50 0 0 0 100 100')

path.fill('none').move(20, 20).stroke({
    
     width: 1, color: '#ccc' })

path.marker('start', 10, 10, function(add) {
    
    
  add.circle(10).fill('#f06')
})
path.marker('mid', 10, 10, function(add) {
    
    
  add.rect(5, 10).cx(5).fill('#ccc')
})
path.marker('end', 20, 20, function(add) {
    
    
  add.circle(6).center(4, 5)
  add.circle(6).center(4, 15)
  add.circle(6).center(12, 10)

  this.fill('#0f9')
})

O método marcador() tem três usos. Primeiro, os marcadores podem ser criados em qualquer elemento do contêiner (por exemplo, svg, aninhado, grupo...). Isto é útil se você planeja reutilizar o marcador várias vezes, então ele criará o marcador em defs, mas ainda não o mostrará:

var marker = draw.marker(10, 10, function(add) {
    
    
  add.rect(10, 10)
})

Em segundo lugar, os marcadores podem ser criados e aplicados diretamente aos seus elementos alvo:

path.marker('start', 10, 10, function(add) {
    
    
  add.circle(10).fill('#f06')
})

Isso criará um marcador em def e o aplicará diretamente. Observe que o primeiro parâmetro define a posição do marcador e possui quatro parâmetros comparados aos três parâmetros do primeiro exemplo.

Finalmente, se você criar um marcador em um elemento contêiner para reutilização, poderá aplicá-lo diretamente ao elemento de destino:

path.marker('mid', marker)

Finalmente, para obter a instância do marcador da referência do elemento alvo:

path.reference('marker-end')

2) marcador.altura()/largura()

Defina a altura/largura do marcador:

marker.height(10)
marker.width(10)

3) marcador.ref()

Por padrão, as propriedades refX e refY do marcador são definidas com metade dos valores de largura e altura, respectivamente. Para definir refX e refY do marcador de forma diferente:

marker.ref(2, 7)

4) marcador.tamanho()

Defina as propriedades de largura e altura do marcador:

marker.size(10, 10)

5) marcador.update()

Atualize o conteúdo do marcador, o que limpará o conteúdo existente do elemento marcador e adicione uma função como primeiro parâmetro:

marker.update(function(add) {
    
    
  add.circle(10)
})

6) marcador.orient()

Defina o atributo orient (orientação):

marker.orient(50)

Explicação em vídeo

Explicação em vídeo