标签：
最近我初学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、矩形透明度
效果图如下：
~%7DECNU@SU86)R2_K45.png)
关键代码：
<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之圆形”部分，希望大家届时来浏览，谢谢大家。
标签：
原文地址：http://www.cnblogs.com/tangyifeng/p/5208186.html
