本節我們來學習如何在 SVG 中繪製橢圓，橢圓和圓形有點像，但是又不一樣。圓形只有一個半徑，而橢圓 x 軸和 y 軸上的半徑不同，所以橢圓就是一個不規則的圓。
如何繪製一個橢圓
在繪製橢圓時， 可以通過 cx 和 cy 屬性確定橢圓的圓心，rx 設置橢圓的 x 軸的半徑，ry 設置 y 軸的半徑。
示例：
例如下面這個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<ellipse cx="100" cy="50" rx="50" ry="30" style="fill:red;"/>
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
上述代碼中，我們設置了橢圓的圓心爲 (100,50)，水平半徑爲50，垂直半徑爲 30。如果將 rx 和 ry 的值設置爲相同的值，則會繪製一個規則的圓。
給橢圓設置透明度
如果我們要設置橢圓的透明度，可以使用 opacity 屬性，這個屬性的取值範圍爲 0 到 1 之間的小數。
示例：
例如下面這段代碼中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<ellipse cx="100" cy="50" rx="50" ry="30" style="fill:none; stroke-width: 3; stroke:#b276be; "></ellipse>
<ellipse cx="150" cy="50" rx="50" ry="30" style="fill:#26c3df; opacity: 0.5;"></ellipse>
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
我們繪製了兩個橢圓，其中左邊的橢圓沒有設置填充顏色，而右邊的橢圓填充顏色爲藍色，透明度爲 0.5。如果要改變橢圓的位置，只需要改變橢圓的圓心座標，即 cx 和 cy 屬性的值即可。