Essa propriedade define um caminho.
uso
Atributos de definição de Caminho de Categoria
valor
Variabilidade Sim
Documentação da Especificação SVG 1.1 (2ª Edição)
A propriedade d é, na verdade, uma string que contém uma série de descrições de caminhos. Esses caminhos consistem nas seguintes instruções:
- Moveto
- Lineto
- Curveto
- Arcto
- FechaCaminho
Esses são combinados em uma corda. Esses diferentes comandos são sensíveis a maiúsculas e maiúsculas; Um comando maiúsculo indica que seus parâmetros são posições absolutas, enquanto comandos minúsculos indicam um ponto relativo à posição atual. Um valor negativo pode ser especificado como parâmetro para o comando: o ângulo negativo será no sentido anti-horário, e as posições absolutas x e y serão consideradas coordenadas negativas. O valor relativo negativo x se moverá para a esquerda, enquanto o valor relativo negativo de y subirá.
Moveto
O comando Moveto pode ser pensado como pegar uma caneta de desenho e pousar em outro lugar. Não há segmento de linha traçado entre o ponto anterior e esse ponto especificado. É uma boa ideia começar um caminho com um comando Moveto, porque sem um Moveto inicializado, o ponto de partida será onde a operação anterior ocorreu, o que pode levar a comportamentos indeterminados.
Sintaxe:
M x,y aqui x e y são coordenadas absolutas, representando coordenadas horizontais e verticais respectivamente.
m dx, dy aqui dx e dy são as distâncias relativas ao ponto atual, para a direita e para baixo, respectivamente.
Exemplo:
Na posição absoluta x=50, y= 100:<caminho d="M50,100..." />
Mova 50 para a direita, 100 para baixo: <caminho d="m50,100..." />
Lineto
Diferente do comando Moveto, o comando Lineto desenha um segmento reto. Esse segmento em linha reta se move da posição atual para a posição especificada. A sintaxe do comando nativo Lineto é "L x, y" ou "l dx, dy", onde x e y são coordenadas absolutas, e dx e dy são as distâncias para a direita e para baixo, respectivamente. Existem também as letras H e V, que especificam movimentos horizontais e verticais, respectivamente. Eles têm a mesma sintaxe que L, e sua versão minúscula é distância relativa, e a versão maiúscula é posição absoluta.
Curveto
O comando Curvto especifica uma curva de Bézier. Existem dois tipos de curvas de Bézier: cúbicas e quadráticas. Uma curva de Bézier quadrática é uma curva de Bézier cúbica especial onde as duas extremidades do ponto de controle são as mesmas. A sintaxe de uma curva quadrática de Bézier é "Q cx, cy x, y" ou "q dcx, dcy dx, dy". Cx e Cy são ambas coordenadas absolutas dos pontos de controle, enquanto DCX e DCY são as distâncias dos pontos de controle nas direções X e Y, respectivamente.
A curva cúbica de Bézier segue o mesmo conceito da curva quadrática de Bézier, mas precisa considerar dois pontos de controle. A sintaxe da curva cúbica de Bézier é: "C c1x, c1y c2x, c2y x, y" ou "c dc1x, dc1y dc2x, dc2y dx, dy", onde c1x, c1y e c2x, c2y são as coordenadas absolutas dos pontos de controle dos pontos de início e fim, respectivamente. DC1X, DC1Y e DC2X, DC2Y são relativos ao ponto inicial, não ao ponto final. dx e dy são as distâncias para a direita e para baixo, respectivamente.
Para conectar curvas Bézier suaves, você também pode usar os comandos T e S. A sintaxe deles é mais simples do que a de outros comandos do Curveto porque assume que o primeiro ponto de controle é um reflexo do ponto de controle anterior no anterior, ou que na verdade é o ponto anterior se não houver nenhum ponto de controle anterior. A sintaxe de T é "T x,y" ou "t dx,dy", que corresponde às coordenadas absolutas e distâncias relativas, respectivamente, e é usada para criar uma curva de Bézier quadrática. S é usado para criar uma curva cúbica de Bézier, cuja sintaxe é "S cx, cy x, y" ou "s dcx, dcy dx, dy", onde (d)cx especifica o segundo ponto de controle.
Por fim, todos os comandos da curva de Bézier podem criar um grafo de Bézier multifaceto, inicializar o comando primeiro e então especificar todos os parâmetros várias vezes para criar um grafo de Bézier multifaceto. Portanto, os dois comandos a seguir podem criar exatamente o mesmo caminho:
Arcto
Às vezes, é mais simples descrever um caminho de curva de arco elíptico do que um caminho de curva de Bézier. No fim das contas, o elemento caminho suporta o comando Arto. O centro do arco é calculado por outras variáveis. Uma declaração arcto é relativamente uma repetição do Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Desconstruindo-o, rx e ry são os raios nas direções x e y, respectivamente, e o valor do LargeArcFlag é 0 ou 1 para determinar se desenhar um arco pequeno (0) ou um arco grande (1). A Bandeira de Varredura também é 0 ou 1, que é usada para determinar se o arco é no sentido horário (1) ou anti-horário (0). x e y são as coordenadas do destino. Embora o xAxisRotate suporte a mudança da orientação do eixo x em relação ao referencial atual, esse parâmetro não parece ter muito efeito no Gecko 7.
FechaCaminho
O comando ClosePath simplesmente desenha uma linha reta do ponto atual até o primeiro ponto do caminho atual. É o comando mais simples e não vem com nenhum parâmetro. Ele segue o caminho linear mais curto até o ponto de partida e, se outros caminhos ocorrerem nesse caminho, os caminhos possíveis se cruzam. A sintaxe é "Z" ou "z", e ambos os métodos de escrita têm a mesma função.
elemento
Os seguintes elementos podem usar o atributo d:
As mesmas regras podem ser <animate>aplicadas aos caminhos de animação.
Lembrete
A origem (sistema de coordenadas 0,0 pontos) geralmente é o canto superior esquerdo do contexto. No entanto<glyph>, a origem do elemento está no canto inferior esquerdo da caixa de correio.
Uma vírgula é permitida entre quaisquer dois números, mas não em qualquer outro lugar.
exemplo
<SVG versão="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="novo 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Para demonstrar o que d="M37,17v15H14V17H37z M50,0H0v50h50V0z" realmente significa, vamos discutir cada subparágrafo dessa cadeia.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Essa propriedade contém as strings que compõem todo o SVG.
M37,17
M é a abreviação de MoveTo. O "M" maiúsculo significa coordenadas absolutas, e o "m" minúsculo significa distância relativa. Isso implica que é baseado nas coordenadas de início, a linha está dentro da caixa, e você começa no canto superior direito do retângulo dentro da caixa.
37 é a abreviação da posição inicial do SVG, em 37 pixels no eixo X.
17 Iniciar posição svg, em 17 pixels no eixo y.
v15
V significa vertical. O V maiúsculo indica coordenadas absolutas, e o V minúsculo indica o comprimento e distância relativos. dx/dy e x/y podem ser usados nas posições correspondentes de H/V e h/v.
Aqui ele é representado desenhando uma linha vertical de 15 pixels em relação a uma coordenada dada. Significa que você desenha 15 pixels para as coordenadas 37,32.
H14
H significa nível, que são coordenadas absolutas porque é capitalizada.
A partir do final da v15, desenhe uma linha horizontal até atingir a coordenada absoluta 14, e termine o desenho quando atingir a coordenada x 14. Os traços estão localizados nas coordenadas 14,32.
V17
Assim como antes, comece pelo final da linha anterior e desenhe uma linha vertical até alcançar a coordenada 17 do eixo y. Os traços estão localizados nas coordenadas 14 e 17.
H37
Por fim, começando nos números 14, 17, desenhe uma linha horizontal até chegar à coordenada 37 do eixo x. O traço está localizado nas coordenadas 37,17 (valor de M)
z
Tanto as letras minúsculas quanto as maiúsculas Z fecham uma série de segmentos SVG.
,
Uma vírgula inicia a próxima sequência de segmentos simples de gráficos vetoriais. A próxima série de segmentos vetoriais simples formará a caixa externa.
M50,0
Comece no eixo x 50 e eixo y 0.
H0
Desenhe uma linha reta até (0,0).
v50
Desenhe uma linha vertical de 0,0 pixels em relação a 50. Essa linha será traçada até (0,50).
H50
Desenhe uma linha horizontal de 50 pixels em relação a (0,-50). Essa linha será traçada à direita de (50,50).
V0
Desenhe uma linha vertical até chegar à coordenada 0 do eixo y. Isso traçará uma linha para (50,0), que é o valor de M.
z
Tanto as letras minúsculas quanto as maiúsculas Z fecham uma série de segmentos SVG.
Anexe o código:
Por fim, o link para o documento está anexado: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Publicado em 04/05/2018 11:29:47
|
|
|
|
