使用SVG繪制矩形、圓形和橢圓形。

　　SVG有一些預定義的形狀元素，可以供開發者使用。這些元素分別是矩形、圓形 circle [?s??rkl]、橢圓 ellipse、線條 line、多線條 polyline、多邊形 polygon、路徑 path 。

　　我們先來學習矩形的繪制。

　　繪制矩形使用 rect 標簽，它是 rectangle 的縮寫，就是矩形的意思。它是一個單標簽，基本語法為：尖角號 rect，斜線尖角號。

　　注意，任何一個 HTML 單標簽，都可以在第二個尖角號前寫一個斜線，表示標簽閉合了，也就是說，用閉合標簽來表示單標簽，其實這樣寫更加嚴謹。

　　它有幾個重要的屬性：

　　width，定義矩形的寬度，值是一個數字。

　　height，定義矩形的高度，值也是一個數字。

　　fill  [f?l]，定義矩形的填充顏色，值可以是任意合法的顏色值，比如顏色名稱，rgb顏色值，十六進制顏色值等。

　　stroke-width [stro?k w?dθ]  ，筆畫寬度，定義了矩形的邊框寬度，值是一個數字。

　　stroke [stro?k] ，描邊，定義矩形邊框的顏色。

　　我們來舉個例子。

　　打開編輯器，創建一個 rect_circle_ellipse.html 文件，補全基礎代碼，在 body 里添加一個 svg 標簽，定義屬性 width 等于 400.height 等于 110.

　　在svg里添加 rect 標簽，定義屬性 width 等于 300.height 等于 100.fill 顏色填充值為 blue，藍色，stroke-width 筆畫寬度屬性值為 3. stroke 描邊屬性值為 black，黑色。保存文件。

　　在瀏覽器中預覽，一個矩形就繪制好了。

　　再來學習幾個矩形的屬性：

　　width，定義矩形的寬度，值是一個數字。

　　x，定義矩形的左邊位置，值是一個數字。

　　y，定義矩形的頂部位置，值是一個數字。

　　fill-opacity，定義填充顏色的不透明度，合法值的范圍是0 到 1.

　　stroke-opacity，定義描邊顏色的不透明度，合法值的范圍是0 到 1.

　　回到編輯器，在上個 svg 結尾處添加一個 br 標簽。

　　回車換行。添加一個新的 svg 標簽，屬性 width 等于 400.height 等于 180.

　　在 svg 里面添加一個 rect 標簽，屬性 x 等于 50.y 等于 20.width 等于 150.height 等于 150.fill 等于 blue，stroke 等于 tomato，stroke-width 等于 5.fill-opacity 等于 0.1.stroke-opacity 等于 0.9.保存。

　　回到瀏覽器，刷新，一個邊長為150.背景色為藍色，描邊為番茄色，并帶有一定透明度的矩形就繪制好了。

　　仔細觀察，背景的透明度高，邊框的透明度低，它們的透明度值分別為0.1 和 0.9.這說明：透明度的值越小，透明度越高。如果值為 0.就完全透明了。

　　我們也可以給 rect 定義一個 opacity 屬性，用來設置整個元素的不透明度值，合法值的范圍也是 0 到 1.

　　回到編輯器，我們去掉這個矩形的 fill-opacity 和 stroke-opacity 屬性，定義一個opacity 屬性，值為 0.5.保存。

　　回到瀏覽器，刷新，整個矩形透明了0.5.也就是描邊和背景都透明了50%。

　　最后，我們來繪制一個圓角矩形。

　　圓角矩形通過給 rect 定義 rx，ry 兩個屬性來實現。

　　rx，定義圓角x軸方向的半徑長度，值是一個數字。

　　ry，定義圓角y軸方向的半徑長度，值是一個數字。

　　如果兩個值相等，就是一個圓形的角，兩個值不相等，就是一個橢圓形的角。

　　回到編輯器，在上個svg結尾處添加一個 br 標簽。

　　回車換行。添加一個新的 svg 標簽，屬性 width 等于 400.height 等于 180.

　　在 svg 里面添加一個 rect 標簽，屬性 x 等于 50.y 等于 20.width 等于 150.height 等于 150.fill 等于 red，stroke 等于 black，stroke-width 等于 5.opacity 等于 0.5.

　　最后給rect 添加 rx 等于 20.ry 等于 20.保存。

　　回到瀏覽器，刷新，一個圓角矩形做好了。

　　返回編輯器，如果將 ry 改為 30.保存。

　　回到瀏覽器，刷新，矩形的四個角就變成橢圓形了。

　　接下來，我們學習繪制圓形。

　　繪制圓形使用 circle 標簽，circle 就是圓的意思。它是一個單標簽，基本語法為：尖角號 circle，斜線尖角號。

　　它有三個重要的屬性：

　　cx 和 cy 屬性，定義圓心的 x 和 y 坐標。如果省略了cx和cy，圓的中心會被設置為(0.0)。

　　r 屬性，定義圓的半徑。

　　和繪制矩形一樣，通過定義 stroke、stroke-width、fill 屬性來設置邊框顏色、邊框寬度和背景色填充等等。

　　提示一下， stroke、stroke-width、fill 這三個屬性，常見的圖形繪制都可以使用它們。

　　回到編輯器，在上個svg結尾處添加一個 br 標簽。回車換行。

　　添加一個新的 svg 標簽，屬性 width 等于 100.height 等于 100.

　　在 svg 里面添加一個 circle 標簽，屬性 cx 等于 50.cy 等于 50.r 等于 40.stroke 等于 black，stroke-width 等于 3.fill 等于 red。保存。

　　回到瀏覽器，刷新，一個圓形就繪制好了。

　　最后，我們學習繪制橢圓形。

　　繪制橢圓形使用 ellipse 標簽，ellipse 就是橢圓的意思。它是一個單標簽，基本語法為：尖角號 ellipse，斜線尖角號。

　　橢圓與圓密切相關。不同的是，橢圓的 x 和 y 半徑是不同的，而圓的 x 和 y 半徑是相等的。

　　ellipse 有四個重要的屬性：

　　cx 屬性，定義橢圓中心的 x 坐標。

　　cy 屬性，定義橢圓中心的 y 坐標。

　　rx 屬性，定義水平半徑。

　　ry 屬性，定義垂直半徑。

　　回到編輯器，在上個svg結尾處添加一個 br 標簽。回車換行。

　　添加一個新的 svg 標簽，屬性 width 等于 140.height 等于 500.

　　在 svg 里面添加一個 ellipse 標簽，屬性 cx 等于 200.cy 等于 80.rx 等于 100.ry 等于 50.fill 等于yellow，stroke 等于 purple，stroke-width 等于 2.保存。

　　回到瀏覽器，刷新，一個橢圓形就繪制好了。

　　返回編輯器，我們繪制三個堆疊的橢圓。在上個svg結尾處添加一個 br 標簽。回車換行。

　　添加一個新的 svg 標簽，屬性 width 等于 150.height 等于 500.

　　在 svg 里面添加一個 ellipse 標簽，屬性 cx 等于 240.cy 等于 100.rx 等于 220.ry 等于 30.fill 等于purple。

　　再添加一個 ellipse 標簽，屬性 cx 等于 220.cy 等于 70.rx 等于 190.ry 等于 20.fill 等于lime。

　　再添加一個 ellipse 標簽，屬性 cx 等于 210.cy 等于 45.rx 等于 170.ry 等于 50.fill 等于yellow。保存。

　　回到瀏覽器，刷新，三個逐漸縮小的堆疊橢圓就做好了。

　　仔細觀察發現，三個橢圓的堆疊順序并不是html的書寫順序。這是因為他們的位置和大小是由 cx, cy, rx, ry 來決定的，不是由 html 書寫順序來決定的。根據這個特點，我們可以將多個橢圓組合起來。

　　返回編輯器，在上個svg結尾處添加一個 br 標簽。回車換行。

　　添加一個新的 svg 標簽，屬性 width 等于 100.height 等于 500.

　　在 svg 里面添加一個 ellipse 標簽，屬性 cx 等于 240.cy 等于 50.rx 等于 220.ry 等于 30.fill 等于 yellow。

　　再添加一個 ellipse 標簽，屬性 cx 等于 220.cy 等于 50.rx 等于 190.ry 等于 20.fill 等于white。保存。

　　回到瀏覽器，刷新，視覺上看，一個空心的橢圓就繪制好了。

　　關于SVG繪制矩形、圓形、橢圓型，我們就講完了。大家快快動起來，繪制自己的圖形吧!

上一篇

初識SVG

下一篇

其他實用標簽