Latest web development tutorials

elipse SVG

SVG elipse - <elipse>

Ejemplo 1

lt; elipse> se utiliza para crear una elipse:

Ovalados y redondos muy similar. Excepto que la elipse tiene un radio diferente de x e y, y el radio de X e Y del círculo es el mismo:

Aquí está el código SVG:

Ejemplos

<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>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).

análisis de código:

  • coordenada x CX atributos definidos centro de la elipse
  • y coordinar atributo CY define el centro de la elipse
  • radio horizontal definición de atributo RX
  • Radio vertical definición de atributo RY

Ejemplo 2

El siguiente ejemplo crea tres y acumulado en el óvalo:

Aquí está el código SVG:

Ejemplos

<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>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).


Ejemplo 3

El ejemplo siguiente combina dos elipse (un amarillo y un blanco):

Aquí está el código SVG:

Ejemplos

<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>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).