Caminho <path> SVG

O elemento 'path' é um elemento genérico usado para definir formas. Todas as formas básicas podem ser criadas usando o elemento 'path'. O elemento <path> do SVG é usado para desenhar formas avançadas compostas por linhas, arcos, curvas, entre outros, com ou sem preenchimento. Este elemento <path> pode ser o mais avançado e mais genérico entre todos os elementos do SVG, e também pode ser o mais difícil de dominar.

Editor de SVG online -　 可在线编辑SVG，根据SVG可转为源代码

Path示例

SVG 简单示例:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50
　　　　　　　　　　　　　A30,30 0 0,1　35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>　　　　
</svg>

O resultado após a execução é o seguinte:

请注意图像如何包含一条圆弧和两条直线，以及第二条直线如何没有与第一条圆弧和直线连接。

所有带有元素的绘图都在d属性中指定。 d属性包含绘图命令。 在上面的实例中，M表示“Move to”(移动到)命令，A表示“Arc”(弧形)命令，L表示“Line”(直线)命令。 这些命令被提供给“虚拟笔”。 这支笔可以移动，可以画形状等。

设置和移动笔

d属性中的第一个绘图命令应该始终是move命令。在你可以画任何东西之前，你应该把虚拟笔移到某个地方。这是使用M命令完成的。下面是一个简单的实例：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

本示例将虚拟笔移动到50,50点。下一个绘图命令将从该点开始。

线条

画一条线可能是您可以给元素的最简单的命令。使用L和l（小写L）命令完成画线:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50　　　　　　　　　　　　　L100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

Este exemplo começa do ponto50,50（M命令的点）到点100,100（L命令的点）画一条线。 运行后图像效果：

L和l命令之间的区别在于，大写版本(L)绘制一条直线到传递给命令的绝对点，而小写版本(l)版本绘制一条直线到传递给命令的相对点。相对点是虚拟笔在行开始之前的点，加上给定l命令的坐标。
如果虚拟笔位于50，50，并且您使用l100,100命令，则直线将绘制为50+100，50+100=150,150。 而不管虚拟笔的位置如何，使用L100,100命令可以精确地将直线绘制到100,100.

绘图移动虚拟笔

路径形状始终从最后一个虚拟笔点绘制到新的点。 每个绘图命令都有一个终点。 执行该命令后，虚拟笔点将位于该绘图命令的终点。 下一个绘图命令将从该点开始。

弧线

使用元素绘制圆弧是使用A和a命令完成的。 与直线类似，大写命令(A)使用绝对坐标作为其终点，而小写命令(A)使用相对坐标(相对于起点)。 下面是一个实例：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path d="M50,50　　　　　　　　　　　　　A30,50 0 0,1　100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

O resultado após a execução é o seguinte:

Este exemplo começa do ponto50,50 até o ponto100,100 (último especificado no comando A) para desenhar uma arco.
O raio da arco é configurado pelos dois primeiros parâmetros definidos no comando A. O primeiro parâmetro é rx (raio na direção x), e o segundo parâmetro é ry (raio na direção y). Definir rx e ry com o mesmo valor produzirá um arco. Definir rx e ry com valores diferentes produzirá um arco elíptico. No exemplo acima, rx é configurado como30, ry definido para50.
O terceiro parâmetro configurado no comando A é a rotação do eixo x (x-axis-rotation). Em comparação com o eixo x normal, isso configurará a rotação do eixo x do arco. No exemplo acima, a rotação do eixo x foi configurada para 0. Na maioria das vezes, você não precisa alterar esse parâmetro.

flag) são os três primeiros parâmetros. O quarto e quinto parâmetros são o sinalizador de arco grande (large-um exemplo de arco com o sinalizador de arco grande (large-arc-flag) determina se deve ser desenhado o arco menor ou maior que atende aos pontos de partida, destino e rx e ry. Abaixo está um exemplo de desenho-um exemplo de arco com o sinalizador de arco grande (large-flag) parâmetros. O sinalizador de arco grande (large4flag) determina se deve ser desenhado o arco menor ou maior que atende aos pontos de partida, destino e rx e ry. Abaixo está um exemplo de desenho-um exemplo de arco com o sinalizador de arco grande (large-arc-flag) e o sinalizador de varredura (sweep

<svg width="500" height="12flag) combinações diferentes:
　　　　<path d="M40,20 "style="stroke: #00ff00; stroke30,30">　60,70 0 0,0-largura:2; fill:none;"</path>
　　　　<path d="M40,20 "style="stroke: #00ff00; stroke30,30 "style="stroke: #ff0000; stroke　10 "style="stroke: #cccc00; stroke　60,7,0-largura:2; fill:none;"</path>
　　　　<path d="M40,20 "style="stroke: #00ff00; stroke30,30 "style="stroke: #ff0000; stroke　1,1　60,70 0,-largura:2; fill:none;"</path>
　　　　<path d="M40,20 "style="stroke: #00ff00; stroke30,30 0 0,1　60,70" style="stroke: #0000ff; stroke-largura:2; fill:none;"</path>
</svg>

O resultado após a execução é o seguinte:

pode ser40,20 até o ponto60,70 para desenhar quatro arcos diferentes. Um arco longo, um arco curto e cada arco curto/duas versões espelhadas do arco grande. O sinalizador de arco grande determina se deve ser desenhado um arco grande ou pequeno. O sinalizador de varredura determina se o arco será espelhado ao longo do eixo de partida para destino. Na verdade, o sinalizador de varredura controla a direção de desenho do arco (horário ou anti-horário), resultando no efeito de 'espelho'.

O primeiro arco desenhado é o arco amarelo. Definir o sinalizador de arco grande (large

O segundo arco desenhado é o arco vermelho. Definir o sinalizador de arco grande (large1Significa que será desenhado o maior dos dois arcos possíveis, com um raio de40,20 até60,70. Abaixo estão os arcos amarelos e vermelhos juntos, para ilustrar as diferenças:

os arcos verdes e azuis (de todos os quatro arcos do exemplo anterior) são iguais aos arcos amarelos e vermelhos, mas ao desenhar, a sinalização de varredura (sweep)-flag) definido para1Isso significa que elas desenharão o mesmo arco, mas irão se espelhar no eixo de partida para destino.

Curva bézier quadrática

Ainda é possível usar o elemento <path> para desenhar curvas Bezier de segundo grau. O desenho de curvas Bezier de segundo grau é feito usando os comandos Q e Q. Como uma linha reta, o comando em maiúsculo (Q) usa coordenadas absolutas como seu ponto final, enquanto o comando em minúsculo (q) usa coordenadas relativas (relativas ao ponto de partida). Abaixo está um exemplo simples de curva de segundo grau:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50  Q50,100　100,100"　
　　　　　　style="cor da linha: #006666; fill:none;"/></svg>

O resultado após a execução é o seguinte:

Este exemplo desenha uma curva Bezier quadrática a partir de50,50 até o ponto100,100, o ponto de controle é50,200. O ponto de controle é o primeiro dos dois parâmetros definidos na ordem Q.

Os pontos de controle atraem a curva como um ímã. Quanto mais próximo um ponto da curva estiver do ponto de controle, mais o ponto de controle se puxará para dentro, o que significa que está mais próximo do ponto de controle. Aqui estão alguns exemplos de pontos de controle desenhados na imagem:

Na verdade, se você desenhar uma linha da origem para o ponto de controle e outra linha do ponto de controle para o ponto final, a linha que liga o meio da primeira linha ao meio da segunda linha é a tangente da curva. Aqui está uma imagem que ilustra isso:

Curvas Bezier de terceiro grau

Desenhar curvas Bezier de terceiro grau usando os comandos C e c. As curvas Bezier de terceiro grau são semelhantes às curvas Bezier quadráticas, exceto que elas têm dois pontos de controle em vez de um. Como as linhas, o comando em maiúsculas (C) usa coordenadas absolutas como seu ponto final, enquanto o comando em minúsculas (c) usa coordenadas relativas (relativas ao ponto de partida):

<path d="M50,50  C75,80　125,20　150,50"
　　　　　　style="cor da linha: #006666; fill:none;"/>

Esta é a imagem resultante ao desenhar os pontos de controle, o resultado após a execução é o seguinte.

Você pode usar curvas Bezier de terceiro grau para criar curvas avançadas:

Fechamento do caminho

O elemento <path> possui um comando rápido para fechar o caminho, o que significa uma linha que retorna do último ponto desenhado ao primeiro ponto. O comando é Z (ou z)-Não há diferença entre comandos de fechamento de caminho em maiúsculas e minúsculas):

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50  L100,50  L100,100  Z"
　　　　style="cor da linha: #006666; fill:none;"/></svg>

O resultado após a execução é o seguinte:

Comandos combinados

Você pode combinar comandos path no mesmo elemento <path>. Abaixo está um exemplo:

<svg width="500" height="225">
　　　　<path d="M100,100  L150,100  a50,25　0 0,0　150,100  q50,-50　70,-170  Z" style="cor da linha: #006666; fill: none;"></path>
</svg>

Este exemplo desenha uma linha reta, um arco circular, uma curva Bezier quadrática e fecha o caminho com uma linha que retorna ao ponto de partida. Aqui está a imagem gerada:

Preencher o caminho

Você pode usar a propriedade fill CSS para preencher o caminho. Abaixo está um exemplo:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M100,100  L150,100  L150,150  Z"
　　　　　　style="cor da linha: #0000cc;
　　　　　　　　　　　　　cor da linha-largura:　2px;      fill: #ccccff;"/></svg>

O resultado após a execução é o seguinte:

Observe como o interior da forma é preenchido com azul claro.

Marcador

Você pode usar marcadores no elemento <path>. Os marcadores são pequenos símbolos localizados no início, meio e fim do caminho, usados para mostrar a direção do caminho. Por exemplo, o início do caminho tem um círculo ou quadrado e o final tem uma seta.

Atalhos de símbolos

Se precisar usar o mesmo comando várias vezes, pode omitir a letra do comando e fornecer apenas um conjunto adicional de parâmetros, como se o comando estivesse lá. Este é um exemplo:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Este exemplo ilustra como passar outros parâmetros para o comando l, como se cada parâmetro tivesse um l antes. Isso também se aplica a outros comandos de caminho. A seguir está a imagem gerada:

Comandos completos de Path

A seguir está o SVG　pathElementoLista de possíveis comandos do lápis.Cada comando é composto por uma letra e um grupo de números (coordenadas, etc.), que são os parâmetros do comando.Os comandos em maiúsculo geralmente interpretam os parâmetros de coordenadas como coordenadas absolutas.Os comandos em minúsculo geralmente interpretam os parâmetros de coordenadas em relação à posição atual do lápis.