一篇文章教會(huì)你使用SVG 畫(huà)橢圓
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
SVG
一、SVG橢圓示例
示例（畫(huà)橢圓 ）：
<html><head><meta charset="utf-8"><title>項(xiàng)目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>
運(yùn)行后的結(jié)果:
解析：
橢圓cx , cy像圓一樣居中。
但是x和y方向上的半徑由兩個(gè)屬性（而不是一個(gè)）指定：rx和ry屬性。就像看到rx 屬性具有比該ry屬性具有更高的值，從而使橢圓寬于其高度。將rx和ry屬性設(shè)置為相同的數(shù)字將生成圓圈。
1. stroke-width邊框?qū)挾仍O(shè)置
可以使用 style屬性 stroke-width設(shè)置橢圓的邊框?qū)挾取?/span>
例：
<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>
運(yùn)行后結(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。
這是渲染橢圓時(shí)的外觀 :
三、透明邊框
可以使用style屬性stroke-opacity使SVG橢圓的邊框變?yōu)榘胪该鳌?/span>
例：
<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>
代碼運(yùn)行后SVG橢圓效果如下:
注意
第二個(gè)（藍(lán)色）橢圓是透明的，以及如何通過(guò)其筆劃看到紅色的橢圓。
四、橢圓填充
可以使用fill樣式屬性來(lái)填充橢圓。
例：
<svg height="120"><ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5;fill: #ff6666;"/>svg>
運(yùn)行后SVG橢圓的外觀 :
五、填充有透明度
fill-opacity樣式屬性可被用來(lái)設(shè)置一個(gè)橢圓的填充顏色的不透明度（透明性）。
例：
<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>
橢圓在渲染時(shí)的外觀效果圖如下:
注意
第二個(gè)（藍(lán)色）橢圓是半透明的，從而使紅色的橢圓可見(jiàn)。
六、總結(jié)
本文基于SVG 基礎(chǔ)，利用SVG畫(huà)不同樣式的橢圓，透明邊框，橢圓填充，添加填充透明度。以及在實(shí)際開(kāi)發(fā)項(xiàng)目中需要注意的點(diǎn)，遇到的一些難點(diǎn)， 都提供了一些有效等等解決方案。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望能夠幫助讀者更好的去學(xué)習(xí)SVG。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行