caminho SVG
caminho SVG - <caminho>
<Caminho> elemento é usado para definir um caminho.
A sequência de comando pode ser usado para encaminhar os dados:
- M = moveto
- L = lineto
- H = lineto horizontal
- V = lineto verticais
- C = curveTo
- S = curveTo lisa
- Q = curva de Bezier quadrática
- T = lisa curveTo Bezier quadrática
- A = arco elíptico
- Z = closepath
Nota: Todos os comandos acima permitem letras minúsculas. Capital representa o posicionamento absoluto, o posicionamento relativo indica minúsculas.
exemplo 1
O exemplo acima define um caminho que começa na posição 1500, alcançou posição 75200, e depois de lá para 225 200 em 1500 e caminho finalmente fechado.
Aqui está o código SVG:
Exemplos
<Caminho d = "M150 0 L75 200 L225 200 Z" />
</ Svg>
tente »
Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).
exemplo 2
Usando curva de Bezier modelo suave curva que pode ser escalado por tempo indeterminado. Em circunstâncias normais, o utilizador selecciona um ou dois pontos finais e os dois pontos de controlo. Um ponto de uma curva de Bezier que é chamado de curva de Bezier quadrática e os dois pontos de controle de controle são chamados de cubos.
O exemplo a seguir cria um quadrática curvas de Bezier, A e C são os pontos inicial e final, B é um ponto de controle:
Aqui está o código SVG:
Exemplos
<Caminho id = d "lineAB" = "M 100 350 l 150 -300" stroke = "red"
stroke-width = "3" fill = "none" />
<Caminho id = "lineBC" d = "M 250 50 L 150 300" stroke = "red"
stroke-width = "3" fill = "none" />
<Caminho d = "M 175 200 l 150 0" stroke = "green" stroke-width = "3"
fill = "none" />
<Caminho d = "M 100 350 q 150 -300 300 0" stroke = "blue"
stroke-width = "5" fill = "none" />
<! - Pontos relevantes Mark ->
<G AVC = "black" stroke-width = "3" fill = "black">
<Círculo id = "pointA" cx = "100" cy = "350" r = "3" />
<Círculo id = "pointB" cx = "250" cy = r "50" = "3" />
<Círculo id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<! - Identifique os pontos ->
<G font-size = font "30" = "sans-serif" preencher = curso "black" = "none"
text-anchor = "middle">
<Text x = "100" y = "350" dx = "- 30"> A </ text>
<Text x = "250" y = "50" dy = "- 10"> B </ text>
<Text x = "400" y = "350" dx = "30"> C </ text>
</ G>
</ Svg>
tente »
Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).
Complicado? Sim! ! Devido ao desenhar a complexidade caminho, é altamente recomendável usar editor de SVG para criar gráficos complexos.