SVG繪制矩形簡單示例分享

最近我初學HTML5，剛在一步步學習SVG，積累了一些個人心得和程序代碼，希望和大家分享，今天分享“svg之矩形”部分

1、簡單矩形

效果圖如下：

關鍵代碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100"></rect>    
        </svg>

代碼解析：

rect 代表矩形；

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度；

 

2、矩形填充顏色及邊框

效果圖如下：

 

關鍵代碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" <span style="font-family: Arial, Helvetica, sans-serif;">style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);"</span><span style="font-family: Arial, Helvetica, sans-serif;">></rect>    </span>
        </svg>

代碼解析：

CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）；

CSS 的 stroke-width 屬性定義矩形邊框的寬度；

CSS 的 stroke 屬性定義矩形邊框的顏色

 

3、矩形透明度

效果圖如下：

關鍵代碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;"></rect>    
        </svg>

代碼解析：

CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）；

CSS 的 stroke-opacity 屬性定義邊框顏色的透明度（合法的范圍是：0 - 1）；

CSS 的 opacity 屬性定義整個元素的不透明度（合法的范圍是：0 - 1）；

 

4、矩形位置

效果圖如下：

關鍵代碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;" x="0" y="20"></rect>    
        </svg>

代碼解析：

x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到左側的距離是 0px）；

y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到頂端的距離是 0px）

5、圓角矩形

效果圖如下：

關鍵代碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;" x="0" y="20" rx="20" ry="20"></rect>    
        </svg>

 

代碼解析：

rx 和 ry 屬性可使矩形產生圓角（和css3圓角屬性類似）

好了今天的分享這里結束，我也是一邊學習一邊分享的，若有錯誤的地方請大家指正，下次分享“svg之圓形”部分，希望大家屆時來瀏覽，謝謝大家。