Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use SVG elements to draw ellipses. Xiaobian thinks it is quite practical, so share it with you as a reference. I hope you can gain something after reading this article.

SVG elements are used to draw ellipses. An ellipse is a circle of unequal height and width. In other words, its radii in the x and y directions are different.

I. SVG ellipse example

Example (drawing an ellipse):

project

Results after running:

Analysis:

Ellipses cx , cy are centered like circles.

But radii in the x and y directions are specified by two attributes (not one): the rx and ry attributes. It's like seeing that the rx attribute has a higher value than the ry attribute, making the ellipse wider than its height. Setting the rx and ry attributes to the same number generates circles.

1. stroke-width border width setting

You can set the border width of an ellipse using the style property stroke-width.

Example:

Post-run result images:

II. Dotted border ellipse

You can also use the style attribute stroke-dash array to make elliptical strokes dashed.

Example:

This example sets the dashed line width to 10 and the dashed line space (the space between dashed lines) to 5.

This is what the ellipse looks like when rendered:

Third, transparent border

You can use the style attribute stroke-opacity to make the borders of SVG ellipses translucent.

Example:

The SVG ellipse looks like this:

note

The second (blue) ellipse is transparent, and how the red ellipse can be seen through its strokes.

IV. Elliptical filling

You can use the fill style attribute to fill an ellipse.

Example:

Appearance of SVG ellipse after running:

V. Transparency of filling

The fill-opacity style property can be used to set the opacity (transparency) of the fill color of an ellipse.

Example:

The ellipse looks like this when rendered:

note

The second (blue) ellipse is translucent, making the red ellipse visible.

About "how to use SVG elements to draw ellipses" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.