Dibujar un elipse con SVG <ellipse>

El elemento <ellipse> de SVG se utiliza para dibujar un ellipse. El ellipse es un círculo cuyas alturas y anchos no son iguales. En otras palabras, sus radios en las direcciones x e y son diferentes.

Ejemplo de ellipse SVG

Este es un ejemplo de código para dibujar un ellipse:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse cx="40" cy="40" rx="30" ry="15"
　　　　　　　　　　　style="stroke:#00"6600; fill:#00cc00"/>
</svg>

El resultado después de ejecutarse es el siguiente:

El ellipse cx, cy se centra como un círculo. Pero el radio en las direcciones x e y se especifica por dos propiedades (no por una): las propiedades rx y ry. Como puede ver, la propiedad rx tiene un valor mayor que la propiedad ry, lo que hace que el ellipse sea más ancho que su altura. Establecer las propiedades rx y ry con el mismo número generará un círculo.

trazo-configuración del ancho del borde

Puede usar la propiedad de estilo stroke-width configura el ancho del borde del ellipse. Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-ancho:　5;fill: none;"/>
</svg>

La imagen del resultado después de ejecutarse es la siguiente:

ellipse con bordes discontinuos

También puede usar la propiedad de estilo stroke-dasharray hace que los trazos del ellipse sean discontinuos.

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-ancho:　5;
　　　　　　　　　trazo-dasharray:　10　5;fill: none;"/>
</svg>

En este ejemplo, se configura el ancho de las líneas discontinuas como10, el espacio entre los trazos (el espacio entre las líneas discontinuas) se configura como5. Esto es el aspecto cuando se renderiza el ellipse:

bordes transparentes

Puede usar la propiedad de estilo stroke-La opacidad hace que el borde del ellipse SVG sea semitransparente.

<svg altura="120">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　　　　　estilo="trazo: #ff0000;
　　　　　　　　　　　　　　　　　　　trazo-ancho:　5;
　　　　　　　　　　　　　　　　　　　relleno: none;"></ellipse>
　　　　<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #0000ff;
　　　　　　　　　　　　　　　　　　　trazo-ancho:　5;
　　　　　　　　　　　　　　　　　　　trazo-opacity: 0.5;
　　　　　　　　　　　　　　　　　　　relleno: none;"></ellipse>
</svg>

El efecto del ellipse SVG después de ejecutar el código es el siguiente:

Tenga en cuenta que el segundo (azul) ellipse es transparente y cómo se puede ver el ellipse rojo a través de sus trazos.

relleno de ellipse

Se puede usar la propiedad de estilo fill para rellenar el ellipse:

<svg altura="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　estilo="trazo: #ff0000;
　　　　　　　　　　　　　　　trazo-ancho:　5;
　　　　　　　　　　　　　　　fill: #ff6666;"/>
</svg>

El aspecto del ellipse SVG después de ejecutarse es el siguiente:

Relleno con transparencia

relleno-La propiedad de estilo de transparencia se puede usar para establecer la opacidad (transparencia) del color de relleno de una elipse:

<svg altura="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　estilo="trazo: #ff0000;
　　　　　　　　　　　　　　　trazo-ancho:　5;
　　　　　　　　　　　　　　　relleno: none;"></ellipse>
<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　estilo="trazo: none;
　　　　　　　　　　　　　　　relleno: #0000ff;
　　　　　　　　　　　　　　　relleno-opacity: 0.5;"></ellipse>
</svg>

La apariencia de la elipse durante la renderización es la siguiente:

Tenga en cuenta que la elipse azul es semitransparente, lo que permite que la elipse roja sea visible.