SVG Ellipse
SVG Ellipse （SVG椭圆）
Description of the <ellipse> element
Description of the <ellipse> element
The SVG <ellipse> element creates ellipses. The ellipse is centered by using the cx and cy attributes. However, unlike the <circle> element, the radius in the x and y coordinates is specified by two attributes, not one.
An ellipse and a circle are similar. The difference between them is that an ellipse has an x and y radii, which differ from each other. The x and y radius of a circle is equal. Ellipses can’t define the exact orientation of the ellipse, but you can rotate it with the transform attribute. （>椭圆和圆是相似的。它们之间的区别在于椭圆的x和y半径彼此不同。圆的x和y半径相等。椭圆无法定义椭圆的确切方向，但可以使用transform属性旋转它。）
Example of the SVG <ellipse> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Now let’s explain the code above: （现在，让我们解释上面的代码：）
The cx attribute specifies the x coordinate of the center of the ellipse. （- cx属性指定椭圆中心的x坐标。）
The cy attribute specifies the y coordinate of the center of the ellipse. （- cy属性指定椭圆中心的y坐标。）
The rx attribute specifies the horizontal radius. （- rx属性指定水平半径。）
The ry attribute specifies the vertical radius. （- ry属性指定垂直半径。）
Example of the SVG <ellipse> element for creating two ellipses on top of each other:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
<ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
Sorry,inline SVG isn't supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
You can add as many ellipses as you want with different colors and sizes. （您可以使用不同的颜色和大小添加任意数量的椭圆。）
Example of the SVG <ellipse> element for combining two ellipses:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="150" >
<ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
<ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
Sorry, inline SVG isn't supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
| Attribute | Description |
|---|---|
| cx | This attribute specifies the x position of the ellipse. |
| cy | This attribute specifies the y position of the ellipse. |
| rx | This attribute specifies the radius of the ellipse on the x-axis. |
| ry | This attribute specifies the radius of the ellipse on the y-axis. |
| pathlength | This attribute specifies the total length for the path, in user units. |
The SVG <ellipse> element also supports the Global Attributes and Event Attributes.