SVG 橢圓
實例 1
lt;ellipse> 元素是用來建立一個橢圓：
橢圓與圓形很相似。不同之處在於橢圓有不同的x和y半徑，而圓的x和y半徑是相同的：
下面是SVG程式碼：
實例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
對Opera用戶：查看SVG檔案（右鍵點選SVG圖形預覽來源）。
程式碼解析：
CX屬性定義的橢圓形中心的x座標
CY屬性定義的橢圓中心的y座標
RX屬性定義的水平半徑
RY屬性定義的垂直半徑
#實例2
下面的範例建立了三個累疊而上的橢圓：
下面是SVG程式碼：
#實例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> </svg> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
對Opera用戶：查看SVG文件（右鍵單擊SVG圖形預覽來源）。
實例3
下面的範例組合了兩個橢圓（一個黃的和一個白的）：
下面是SVG程式碼：
實例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /> </svg> </body> </html>
運行實例»
#點擊"運行實例" 按鈕查看線上實例
對於Opera用戶：查看SVG檔案（右鍵點選SVG圖形預覽來源）。
