How does HTML draw an ellipse?
May 29, 2021 Article blog
A few days ago, the W3Cschool combo showed you how CSS draws basic graphics that outline how to draw ellipses. Today we're going to learn how HTML draws basic graphics, which is simpler and easier to get up to and about.
Let's start with the implementation:
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html画图形 - 编程狮(w3cschool.cn)</title>
</head>
<body>
<svg width="500" height="250">
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
</svg>
</body>
</html>
Tags
<svg></svg>
is one of html5's new tags for some basic graphics.
such as rectangles, straight lines, circles, etc.
<ellipse>
is used to draw ellipsoids by simply inserting the <ellipse > labels in the < svg ></svg >.
The four required properties are:
- The x coordinates of the center of the ellipse defined by the cx property
- The y coordinate of the center of the ellipse defined by the cy property
- The horizontal radius defined by the rx property
- The vertical radius defined by the ry property
You can also add styles such as color fills, borders, etc.
That's all you need to do to draw an ellipse in HTML.
For more HTML drawing graphics tutorials read: SVG tutorials.