Entre as tags de forma SVG, path é a mais poderosa, e mastering path é suficiente para lidar com problemas comuns de desenho.
Vamos dar uma olhada no uso básico da tag path primeiro:
<caminho d="M100,100 L200,200 L200,400" preenchimento = #333" curso="#000" />
A tag path define o caminho através da propriedade d, que define a informação composta por uma string, e o caminho também pode ser definido pelos atributos de preenchimento e traço para definir o preenchimento e a borda.
A informação do atributo d na verdade não é complicada, é composta por letras e números, números representam pontos coordenadas, e letras são responsáveis por representar como conectar esses pontos coordenados. Por exemplo, no exemplo acima, M representa o ponto de partida e L representa uma conexão em linha reta, então a informação de d pode ser interpretada assim:
M100,100 -> começa no ponto coordenado (100,100)
L200.200 -> Desenhe uma linha reta de (100.100) a (200.200).
L200.400 -> Desenhe uma linha reta de (200.200) a (200.400).
No atributo d da tag de caminho, há um total de 10 comandos que podem ser usados, e os seguintes 5 comandos são básicos e relativamente simples.
M se move para (move-para) coordenadas do ponto de início x,y
O caminho fechado Z conecta os pontos de início e fim do caminho em linha reta
L lineTo: O nó atual está conectado em linha reta ao nó especificado (x,y)
A linha horizontal H x mantém a coordenada y do ponto atual constante, e o eixo x se move para x, formando uma linha horizontal
V a linha vertical y mantém as coordenadas x do ponto atual inalteradas, e o eixo y se move para y, formando uma linha vertical
M e L
Vamos analisar outro exemplo de M e L
<caminho d="M30,30 L170,30 L30,170 L170,170"></path>
Do ponto A (30, 30), a linha reta é traçada até o ponto B (170, 30), depois reta até o ponto C (30, 170), e então reta até o ponto D (170, 170), formando finalmente um caminho em formato de Z.
Efeito de preenchimento e Z
<caminho d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" preencha "amarelo"></path>
Há dois M nesta descrição de caminho, então em um caminho, dois caminhos relativamente independentes aparecem, sendo o primeiro o mesmo do exemplo acima, que é em formato de Z.
O segundo caminho é um retângulo com o comando Z aparecendo na descrição, indicando que conecta o início e o fim do caminho.
Além disso, aqui definimos a propriedade de preenchimento do caminho, e você pode ver que o preenchimento terá efeito independentemente de o caminho estar fechado ou não.
H e V
Por fim, vamos dar uma olhada nos dois comandos H e V, que na verdade são a abreviação do comando L quando o eixo x ou y permanece inalterado, então as duas extremidades seguintes são descritas e a imagem desenhada é a mesma.
<caminho d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" preencha "amarelo"></path>
<caminho d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" preencha "amarelo"></path>
|
Publicado em 14/08/2017 13:15:15
|
|
|
