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>
自己動手試一試 »