SVG <ellipse>
SVG 橢圓 - <ellipse>
<ellipse> 元素用於建立橢圓。
橢圓與圓密切相關。區別在於橢圓的 x 半徑和 y 半徑可以不同，而圓的 x 半徑和 y 半徑相等。
<ellipse> 元素有四個基本屬性來定位和設定橢圓的大小
| Attribute | 描述 |
|---|---|
| rx | 必需。橢圓的 x 半徑 |
| ry | 必需。橢圓的 y 半徑 |
| cx | 橢圓的 x 軸中心。預設值為 0 |
| cy | 橢圓的 y 軸中心。預設值為 0 |
一個 SVG 橢圓
以下示例建立一個橢圓
這是 SVG 程式碼
示例
<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse rx="100" ry="50" cx="120" cy="80"
style="fill:yellow;stroke:green;stroke-width:3" />
</svg>
自己動手試一試 »
程式碼解釋
rx屬性定義 x（水平）半徑ry屬性定義 y（垂直）半徑cx屬性定義橢圓的 x 軸中心cy屬性定義橢圓的 y 軸中心
三個橢圓
以下示例在彼此之上建立三個橢圓
這是 SVG 程式碼
示例
<svg height="150" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow" />
</svg>
自己動手試一試 »
兩個橢圓
以下示例組合了兩個橢圓（一個黃色和一個白色）
這是 SVG 程式碼
示例
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />
</svg>
自己動手試一試 »
