svg 元素<rect> 是一个矩形元素，用这个元素，可以你可以绘制矩形，设置矩形宽高，边框的宽度颜色，矩形的填充颜色，是否用圆角等

rect 示例

这个矩形的

                   位置：用x和y属性定义，需要注意的是这个位置是相对于 这个矩形的父节点定义的

                   宽高：用height和width 属性定义

                   样式：在style属性里面可以定义各种影响矩形的样式例如边框的颜色、宽度、填充的颜色等

这个例子在网页上的效果

圆角效果

 

矩形的圆角的效果，使用rx，ry定义的，rx定义圆角的宽 ry定义圆角的高

例如

 

效果如下

如果只设置了rx 没有设置ry ry的缺省值就是rx，这可以作为一种简便的写法

矩形的边框

 

例如

你可以定义一个矩形的边框 通过 style 中 stroke 属性

stroke 定义颜色，stroke-width 定义宽度

效果如下

还可以定义边框是实线还是虚线，默认是实线

样式中 stroke-dasharray 属性可以定义边框的类型 例如

效果如下

矩形的填充

ou can fill a rectangle using the . For instance, you can choose not to fill rect element by setting the fill style property to none. Here is an example of that:

通过svg的 样式属性，你可以填充矩形，设置fill属性，如果将fill属性设置为none，矩形内部就什么也不填充了。

例如

效果如下

填充点颜色 看看

效果如下

还可以指定填充的透明 设置 fill-opacity 属性就可以了

例如

效果如下