2.8 KiB
title | localeTitle |
---|---|
SVG Shapes | Formas SVG |
Formas SVG
Diversas formas podem ser criadas usando o desenho SVG. Um desenho SVG pode usar e combinar sete formas: Caminho, Retângulo, Círculo, Elipse, Linha, Polilinha e Polígono.
Caminho
O elemento path
é o mais comumente visto e é geralmente gerado por programas projetados para exportar código SVG.
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
O path
exemplo acima gerará um símbolo "mais" (+) quando usado dentro de um desenho SVG. Os elementos de path
SVG não são criados manualmente, mas gerados por meio de programas de design que podem manipular gráficos vetoriais, como o Illustrator ou o Inkscape.
Retângulo
O retângulo rect
desenha um retângulo na tela e aceita seis atributos.
<rect x="0" y="0" width="100" height="50" rx="10" ry="10" />
x
e y
atribuir a posição do canto superior esquerdo do rectângulo, e width
e height
atribuir o tamanho do rectângulo. rx
e ry
atribuem o raio dos cantos do retângulo, semelhante à propriedade border-radius do CSS.
Círculo
O círculo do elemento do circle
aceita três atributos.
<circle cx="100" cy="100" r="50" />
cx
e cy
atribuir a posição do centro do círculo, e r
designa o raio (tamanho) do círculo.
Elipse
O elemento de elipse, ellipse
, é semelhante ao elemento de circle
, exceto que o raio é dividido em dois atributos.
<ellipse cx="100" cy="100" rx="50" ry="20" />
Novamente, cx
e cy
atribuem a posição do centro da elipse, e agora rx
e ry
atribuem o raio horizontal e vertical da elipse, respectivamente. Um rx
maior dará uma elipse "gorda", e um ry
maior dará uma elipse mais magra. Se rx
e ry
forem iguais, formará um círculo.
Linha
O elemento de line
é simples e aceita quatro atributos.
<line x1="0" x2="100" y1="50" y2="70" />
Os atributos x1
e y1
atribuem o primeiro ponto da linha e os atributos x2
e y2
atribuem o segundo ponto da linha.
Polilinha
Uma polyline
é uma série de linhas retas conectadas, atribuídas em um único atributo.
<polyline points="0 100, 50 70, 60 40, 20 0" />
O atributo points
atribui uma lista de pontos, cada ponto separado por uma vírgula.
Polígono
O elemento polygon
é também uma série de linhas retas conectadas, mas, neste caso, a última linha se reconectará automaticamente ao ponto inicial.
<polygon points="0 100, 50 70, 60 40, 20 0" />
Este exemplo desenhará a mesma forma da polyline
acima, mas desenhará uma linha extra para "fechar" a série de linhas.