Latest web development tutorials

SVG elipse

SVG elipse - <elipse>

exemplo 1

lt; elipse> elemento é usado para criar uma elipse:

Oval e redonda muito semelhante. Excepto que a elipse tem um raio diferente de x e y, e x e y o raio do círculo é o mesmo:

Aqui está o código SVG:

Exemplos

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</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).

análise de código:

  • coordenada x atributos CX central definido da elipse
  • coordenada y atributo CY define o centro da elipse
  • raio Horizontal definição de atributo RX
  • definição de atributo RY raio Vertical

exemplo 2

O exemplo a seguir cria três e amontoados no oval:

Aqui está o código SVG:

Exemplos

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</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 3

O exemplo a seguir combina duas elipse (um amarelo e um branco):

Aqui está o código SVG:

Exemplos

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</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).