使用SVG繪制矩形、圓形和橢圓形。
SVG有一些預(yù)定義的形狀元素，可以供開發(fā)者使用。這些元素分別是矩形、圓形 circle 、橢圓 ellipse、線條 line、多線條 polyline、多邊形 polygon、路徑 path 。
我們先來學(xué)習(xí)矩形的繪制。
繪制矩形使用 rect 標(biāo)簽，它是 rectangle 的縮寫，就是矩形的意思。它是一個(gè)單標(biāo)簽，基本語法為：尖角號(hào) rect，斜線尖角號(hào)。
注意，任何一個(gè) HTML 單標(biāo)簽，都可以在第二個(gè)尖角號(hào)前寫一個(gè)斜線，表示標(biāo)簽閉合了，也就是說，用閉合標(biāo)簽來表示單標(biāo)簽，其實(shí)這樣寫更加嚴(yán)謹(jǐn)。
它有幾個(gè)重要的屬性：
width，定義矩形的寬度，值是一個(gè)數(shù)字。
height，定義矩形的高度，值也是一個(gè)數(shù)字。
fill [f?l]，定義矩形的填充顏色，值可以是任意合法的顏色值，比如顏色名稱，rgb顏色值，十六進(jìn)制顏色值等。
stroke-width [stro?k w?dθ] ，筆畫寬度，定義了矩形的邊框?qū)挾?，值是一個(gè)數(shù)字。
stroke [stro?k] ，描邊，定義矩形邊框的顏色。
我們來舉個(gè)例子。
打開編輯器，創(chuàng)建一個(gè) rect_circle_ellipse.html 文件，補(bǔ)全基礎(chǔ)代碼，在 body 里添加一個(gè) svg 標(biāo)簽，定義屬性 width 等于 400，height 等于 110。
在svg里添加 rect 標(biāo)簽，定義屬性 width 等于 300，height 等于 100，fill 顏色填充值為 blue，藍(lán)色，stroke-width 筆畫寬度屬性值為 3， stroke 描邊屬性值為 black，黑色。保存文件。
在瀏覽器中預(yù)覽，一個(gè)矩形就繪制好了。
再來學(xué)習(xí)幾個(gè)矩形的屬性：
width，定義矩形的寬度，值是一個(gè)數(shù)字。
x，定義矩形的左邊位置，值是一個(gè)數(shù)字。
y，定義矩形的頂部位置，值是一個(gè)數(shù)字。
fill-opacity，定義填充顏色的不透明度，合法值的范圍是0 到 1。
stroke-opacity，定義描邊顏色的不透明度，合法值的范圍是0 到 1。
回到編輯器，在上個(gè) svg 結(jié)尾處添加一個(gè) br 標(biāo)簽。
回車換行。添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 400，height 等于 180。
在 svg 里面添加一個(gè) rect 標(biāo)簽，屬性 x 等于 50，y 等于 20，width 等于 150，height 等于 150，fill 等于 blue，stroke 等于 tomato，stroke-width 等于 5，fill-opacity 等于 0.1，stroke-opacity 等于 0.9。保存。
回到瀏覽器，刷新，一個(gè)邊長為150，背景色為藍(lán)色，描邊為番茄色，并帶有一定透明度的矩形就繪制好了。
仔細(xì)觀察，背景的透明度高，邊框的透明度低，它們的透明度值分別為0.1 和 0.9。這說明：透明度的值越小，透明度越高。如果值為 0，就完全透明了。
我們也可以給 rect 定義一個(gè) opacity 屬性，用來設(shè)置整個(gè)元素的不透明度值，合法值的范圍也是 0 到 1。
回到編輯器，我們?nèi)サ暨@個(gè)矩形的 fill-opacity 和 stroke-opacity 屬性，定義一個(gè)opacity 屬性，值為 0.5。保存。
回到瀏覽器，刷新，整個(gè)矩形透明了0.5，也就是描邊和背景都透明了50%。
最后，我們來繪制一個(gè)圓角矩形。
圓角矩形通過給 rect 定義 rx，ry 兩個(gè)屬性來實(shí)現(xiàn)。
rx，定義圓角x軸方向的半徑長度，值是一個(gè)數(shù)字。
ry，定義圓角y軸方向的半徑長度，值是一個(gè)數(shù)字。
如果兩個(gè)值相等，就是一個(gè)圓形的角，兩個(gè)值不相等，就是一個(gè)橢圓形的角。
回到編輯器，在上個(gè)svg結(jié)尾處添加一個(gè) br 標(biāo)簽。
回車換行。添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 400，height 等于 180。
在 svg 里面添加一個(gè) rect 標(biāo)簽，屬性 x 等于 50，y 等于 20，width 等于 150，height 等于 150，fill 等于 red，stroke 等于 black，stroke-width 等于 5，opacity 等于 0.5。
最后給rect 添加 rx 等于 20，ry 等于 20。保存。
回到瀏覽器，刷新，一個(gè)圓角矩形做好了。
返回編輯器，如果將 ry 改為 30。保存。
回到瀏覽器，刷新，矩形的四個(gè)角就變成橢圓形了。
接下來，我們學(xué)習(xí)繪制圓形。
繪制圓形使用 circle 標(biāo)簽，circle 就是圓的意思。它是一個(gè)單標(biāo)簽，基本語法為：尖角號(hào) circle，斜線尖角號(hào)。
它有三個(gè)重要的屬性：
cx 和 cy 屬性，定義圓心的 x 和 y 坐標(biāo)。如果省略了cx和cy，圓的中心會(huì)被設(shè)置為(0,0)。
r 屬性，定義圓的半徑。
和繪制矩形一樣，通過定義 stroke、stroke-width、fill 屬性來設(shè)置邊框顏色、邊框?qū)挾群捅尘吧畛涞鹊取?/p>
提示一下， stroke、stroke-width、fill 這三個(gè)屬性，常見的圖形繪制都可以使用它們。
回到編輯器，在上個(gè)svg結(jié)尾處添加一個(gè) br 標(biāo)簽?；剀嚀Q行。
添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 100，height 等于 100。
在 svg 里面添加一個(gè) circle 標(biāo)簽，屬性 cx 等于 50，cy 等于 50，r 等于 40，stroke 等于 black，stroke-width 等于 3，fill 等于 red。保存。
回到瀏覽器，刷新，一個(gè)圓形就繪制好了。
最后，我們學(xué)習(xí)繪制橢圓形。
繪制橢圓形使用 ellipse 標(biāo)簽，ellipse 就是橢圓的意思。它是一個(gè)單標(biāo)簽，基本語法為：尖角號(hào) ellipse，斜線尖角號(hào)。
橢圓與圓密切相關(guān)。不同的是，橢圓的 x 和 y 半徑是不同的，而圓的 x 和 y 半徑是相等的。
ellipse 有四個(gè)重要的屬性：
cx 屬性，定義橢圓中心的 x 坐標(biāo)。
cy 屬性，定義橢圓中心的 y 坐標(biāo)。
rx 屬性，定義水平半徑。
ry 屬性，定義垂直半徑。
回到編輯器，在上個(gè)svg結(jié)尾處添加一個(gè) br 標(biāo)簽?；剀嚀Q行。
添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 140，height 等于 500。
在 svg 里面添加一個(gè) ellipse 標(biāo)簽，屬性 cx 等于 200，cy 等于 80，rx 等于 100，ry 等于 50，fill 等于yellow，stroke 等于 purple，stroke-width 等于 2。保存。
回到瀏覽器，刷新，一個(gè)橢圓形就繪制好了。
返回編輯器，我們繪制三個(gè)堆疊的橢圓。在上個(gè)svg結(jié)尾處添加一個(gè) br 標(biāo)簽。回車換行。
添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 150，height 等于 500。
在 svg 里面添加一個(gè) ellipse 標(biāo)簽，屬性 cx 等于 240，cy 等于 100，rx 等于 220，ry 等于 30，fill 等于purple。
再添加一個(gè) ellipse 標(biāo)簽，屬性 cx 等于 220，cy 等于 70，rx 等于 190，ry 等于 20，fill 等于lime。
再添加一個(gè) ellipse 標(biāo)簽，屬性 cx 等于 210，cy 等于 45，rx 等于 170，ry 等于 50，fill 等于yellow。保存。
回到瀏覽器，刷新，三個(gè)逐漸縮小的堆疊橢圓就做好了。
仔細(xì)觀察發(fā)現(xiàn)，三個(gè)橢圓的堆疊順序并不是html的書寫順序。這是因?yàn)樗麄兊奈恢煤痛笮∈怯?cx, cy, rx, ry 來決定的，不是由 html 書寫順序來決定的。根據(jù)這個(gè)特點(diǎn)，我們可以將多個(gè)橢圓組合起來。
返回編輯器，在上個(gè)svg結(jié)尾處添加一個(gè) br 標(biāo)簽。回車換行。
添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 100，height 等于 500。
在 svg 里面添加一個(gè) ellipse 標(biāo)簽，屬性 cx 等于 240，cy 等于 50，rx 等于 220，ry 等于 30，fill 等于 yellow。
再添加一個(gè) ellipse 標(biāo)簽，屬性 cx 等于 220，cy 等于 50，rx 等于 190，ry 等于 20，fill 等于white。保存。
回到瀏覽器，刷新，視覺上看，一個(gè)空心的橢圓就繪制好了。
