SVG <ellipse>元素用于繪制橢圓。橢圓是高度和寬度不相等的圓。換句話說，它在x和y方向上的半徑是不同的。
這是一個畫橢圓的示例代碼:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600; fill:#00cc00"/> </svg>測試看看 ?/?
運行后的結(jié)果如下:
橢圓cx , cy像圓一樣居中。但是x和y方向上的半徑由兩個屬性（而不是一個）指定：rx和ry屬性。就像您看到rx 屬性具有比該ry屬性具有更高的值，從而使橢圓寬于其高度。將rx和ry屬性設(shè)置為相同的數(shù)字將生成圓圈。
您可以使用 style屬性 stroke-width設(shè)置橢圓的邊框?qū)挾?。示例?/p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5;fill: none;"/> </svg>測試看看 ?/?
運行后結(jié)果圖像如下:
您還可以使用style屬性stroke-dasharray使橢圓的筆劃變?yōu)樘摼€。:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5; stroke-dasharray: 10 5;fill: none;"/> </svg>測試看看 ?/?
本示例將虛線寬度設(shè)置為10，虛線空間（虛線之間的間隔）設(shè)置為5。這是渲染橢圓時的外觀:
您可以使用style屬性stroke-opacity使SVG橢圓的邊框變?yōu)榘胪该鳌?/p>
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: none;"></ellipse> <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: #0000ff; stroke-width: 5; stroke-opacity: 0.5; fill: none;"></ellipse> </svg>測試看看 ?/?
代碼運行后SVG橢圓效果如下:
注意第二個（藍(lán)色）橢圓是透明的，以及如何通過其筆劃看到紅色的橢圓。
可以使用fill樣式屬性來填充橢圓：
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: #ff6666;"/> </svg>測試看看 ?/?
運行后SVG橢圓的外觀如下:
fill-opacity樣式屬性可被用來設(shè)置一個橢圓的填充顏色的不透明度（透明性）:
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: none;"></ellipse> <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: none; fill: #0000ff; fill-opacity: 0.5;"></ellipse> </svg>測試看看 ?/?
橢圓在渲染時的外觀如下:
注意第二個（藍(lán)色）橢圓是半透明的，從而使紅色的橢圓可見。