一篇文章教會你使用SVG <ellipse> 畫橢圓
SVG <ellipse>元素用于繪制橢圓。橢圓是高度和寬度不相等的圓。換句話說，它在x和y方向上的半徑是不同的。
一、SVG橢圓示例
示例（畫橢圓 ）：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua; ">
- <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:#FF0000" />
- </svg>
- </body>
- </html>
運行后的結果:
解析：
橢圓cx , cy像圓一樣居中。
但是x和y方向上的半徑由兩個屬性（而不是一個）指定：rx和ry屬性。就像看到rx 屬性具有比該ry屬性具有更高的值，從而使橢圓寬于其高度。將rx和ry屬性設置為相同的數字將生成圓圈。
1. stroke-width邊框寬度設置
可以使用 style屬性 stroke-width設置橢圓的邊框寬度。
例：
- <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>
運行后結果圖像:
二、虛線邊框橢圓
還可以使用style屬性stroke-dasharray使橢圓的筆劃變為虛線。
例：
- <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>
本示例將虛線寬度設置為10，虛線空間（虛線之間的間隔）設置為5。
這是渲染橢圓時的外觀 :
三、透明邊框
可以使用style屬性stroke-opacity使SVG橢圓的邊框變為半透明。
例：
- <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橢圓效果如下:
注意
第二個（藍色）橢圓是透明的，以及如何通過其筆劃看到紅色的橢圓。
四、橢圓填充
可以使用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樣式屬性可被用來設置一個橢圓的填充顏色的不透明度（透明性）。
例：
- <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>
橢圓在渲染時的外觀效果圖如下:
注意
第二個（藍色）橢圓是半透明的，從而使紅色的橢圓可見。
六、總結
本文基于SVG 基礎，利用SVG畫不同樣式的橢圓，透明邊框，橢圓填充，添加填充透明度。以及在實際開發項目中需要注意的點，遇到的一些難點， 都提供了一些有效等等解決方案。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望能夠幫助讀者更好的去學習SVG。
本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。
