最近我初學html5，剛在一步步學習svg，積累了一些個人心得和程式**，希望和大家分享，今天分享「svg之矩形」部分
1、簡單矩形
效果圖如下：
關鍵**：
rect 代表矩形；
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度；
2、矩形填充顏色及邊框
效果圖如下：
關鍵**：
css 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進製制值）；
css 的 stroke-width 屬性定義矩形邊框的寬度；
css 的 stroke 屬性定義矩形邊框的顏色
3、矩形透明度
效果圖如下：
關鍵**：
css 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）；
css 的 stroke-opacity 屬性定義邊框顏色的透明度（合法的範圍是：0 - 1）；
css 的 opacity 屬性定義整個元素的不透明度（合法的範圍是：0 - 1）；
4、矩形位置
效果圖如下：
關鍵**：
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到左側的距離是 0px）；
y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到頂端的距離是 0px）
5、圓角矩形
效果圖如下：
關鍵**：
rx 和 ry 屬性可使矩形產生圓角（和css3圓角屬性類似）
好了今天的分享這裡結束，我也是一邊學習一邊分享的，若有錯誤的地方請大家指正，下次分享「svg之圓形」部分，希望大家屆時來瀏覽，謝謝大家。
SVG基礎 繪製SVG矩形
乙個元素代表乙個svg矩形。通過這個元素你可以畫出不同寬度，不同高度，以及不同描邊和不同填充顏色的矩形。同時它還可以繪製直角或圓角的矩形。乙個svg矩形的簡單例子 下面是乙個繪製svg矩形的簡單例子。複製 svg矩形的位置由x和y屬性決定。請記住，這個位置是相對於任何它最接近的父元素的位置。svg矩...
SVG 繪製橢圓
本節我們來學習如何在 svg 中繪製橢圓，橢圓和圓形有點像，但是又不一樣。圓形只有乙個半徑，而橢圓x軸和y軸上的半徑不同，所以橢圓就是乙個不規則的圓。如何繪製乙個橢圓 在繪製橢圓時，可以通過cx和cy屬性確定橢圓的圓心，rx設定橢圓的x軸的半徑，ry設定y軸的半徑。示例 例如下面這個例子 chars...
SVG 繪製橢圓
本節我們來學習如何在 svg 中繪製橢圓，橢圓和圓形有點像，但是又不一樣。圓形只有乙個半徑，而橢圓x軸和y軸上的半徑不同，所以橢圓就是乙個不規則的圓。如何繪製乙個橢圓 在繪製橢圓時，可以通過cx和cy屬性確定橢圓的圓心，rx設定橢圓的x軸的半徑，ry設定y軸的半徑。示例 例如下面這個例子 chars...