SVG繪製矩形簡單示例分享
阿新 • • 發佈:2019-01-26
最近我初學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圓角屬性類似)