乙個元素代表乙個svg矩形。通過這個元素你可以畫出不同寬度，不同高度，以及不同描邊和不同填充顏色的矩形。同時它還可以繪製直角或圓角的矩形。
乙個svg矩形的簡單例子
下面是乙個繪製svg矩形的簡單例子。
複製**
svg矩形的位置由x和y屬性決定。請記住，這個位置是相對於任何它最接近的父元素的位置。
svg矩形的尺寸由width和height屬性決定。
style屬性允許你為矩形設定附加的樣式，如描邊色，描邊寬度和填充色等。
下面的圖形是上面**的返回結果：
圓角矩形
我們也可以繪製圓角的svg矩形。rx和ry屬性用於決定矩形圓角的大小。rx屬性決定圓角的寬度，ry屬性則決定圓角的高度。下面的例子中，三個矩形的圓角分別被設定為5畫素、10畫素和15畫素，請注意觀察他們各自圓角的大小變化。
複製**
上面的**的返回結果如下：
上面的例子中，三個圓角矩形的rx和ry值都是相同的。如果你單獨設定了rx的值，那麼ry的值和rx相同。這是定義svg圓角矩形的簡寫方式。
下面的兩個例子中，rx的值都設定為10畫素，但是ry的值分別設定為5畫素和15畫素。這兩個例子展示了矩形圓角的寬度和高度不相同時的情況。
複製**
上面的**的返回結果如下：
描邊矩形
你可以使用stroke屬性來設定svg矩形的邊框屬性。下面的例子設定矩形的邊框為綠色，邊框的寬度為3畫素。
複製**
上面的**的返回結果如下：
你還可以使用stroke-dasharray屬性將矩形的邊框設定為虛線。看下面的例子：
複製**
上面的**的返回結果如下：
填充矩形
你可以使用fill屬性來為svg矩形填充顏色。例如將矩形的顏色填充為none。
複製**
這時，svg矩形的填充色將和瀏覽器的頁面顏色一樣。
你也可以選擇一種顏色來填充矩形。下面的例子將矩形填充為綠色。
複製**
最後，你可以用fill-opacity屬性來設定填充矩形的透明度。下面的例子中，兩個句子部分疊加在一起，上面的矩形設定為50%的填充透明度。
複製**
上面的**的返回結果如下：
SVG繪製矩形簡單示例分享
最近我初學html5，剛在一步步學習svg，積累了一些個人心得和程式 希望和大家分享，今天分享 svg之矩形 部分 1 簡單矩形 效果圖如下 關鍵 解析 rect 代表矩形 rect 元素的 width 和 height 屬性可定義矩形的高度和寬度 2 矩形填充顏色及邊框 效果圖如下 關鍵 解析 c...
SVG 繪製橢圓
本節我們來學習如何在 svg 中繪製橢圓，橢圓和圓形有點像，但是又不一樣。圓形只有乙個半徑，而橢圓x軸和y軸上的半徑不同，所以橢圓就是乙個不規則的圓。如何繪製乙個橢圓 在繪製橢圓時，可以通過cx和cy屬性確定橢圓的圓心，rx設定橢圓的x軸的半徑，ry設定y軸的半徑。示例 例如下面這個例子 chars...
SVG 繪製橢圓
本節我們來學習如何在 svg 中繪製橢圓，橢圓和圓形有點像，但是又不一樣。圓形只有乙個半徑，而橢圓x軸和y軸上的半徑不同，所以橢圓就是乙個不規則的圓。如何繪製乙個橢圓 在繪製橢圓時，可以通過cx和cy屬性確定橢圓的圓心，rx設定橢圓的x軸的半徑，ry設定y軸的半徑。示例 例如下面這個例子 chars...