如果要畫出橢圓形的話，就得使用 <ellipse> 標籤囉。
檢視原始碼 HTML
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="100" cy="60" rx="80" ry="50" /> </svg> |
rx 是橢圓形的 x 軸半徑；ry 就是橢圓形的 y 軸半徑：
當然也能自訂樣式：
檢視原始碼 HTML
1 2 3 4 5 6 7 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="100" cy="60" rx="70" ry="50"style="fill:#fcc;stroke:#ccc;stroke-width:10;" /> <ellipse cx="100" cy="190" rx="70" ry="50" style="fill:fcc;stroke:#ccc;stroke-width:10;fill-opacity:.5;" /> <ellipse cx="100" cy="320" rx="50" ry="50" style="fill:fcc;stroke:#ccc;stroke-width:10;opacity:.5;" /> </svg> |
不過要注意的是，如果 rx 及 ry 都設成一樣的話，那就是變成圓形囉！
筆者將 ellipse 的屬性整理成一個簡單的表格：
ellipse 屬性
| 屬性名稱 | 屬性說明 |
|---|---|
| cx | 橢圓形中心點 x 軸的座標 |
| cy | 橢圓形中心點 y 軸的座標/td> |
| rx | 橢圓形的 x 軸半徑 |
| ry | 橢圓形的 y 軸半徑 |
| transform | 橢圓形的變形效果，類似 css 中的 transform |