html rect svg 坐标,SVG Rect（矩形）

SVG Rect(矩形)

元素用来画一个矩形，该矩形的轴与当前容器的坐标系对齐。(是不是不好理解？文章后面有图例解释。)

语法

以下是元素的语法声明，这里只显示主要属性。

x="x轴坐标"

y="y轴坐标"

width="长度"

height="长度"

rx="长度"

ry="长度"

style="样式"

class="样式" >

属性S.N. 名称与说明

1 x - 矩形左上角的x轴坐标. 默认为0.

2 y - 矩形左上角的y轴坐标. 默认为0.

3 width - 矩形宽度.

4 height - 矩形高度.

5 rx - 设置圆角矩形的弧度.

6 ry - 设置圆角矩形的弧度.

7 style - 设置样式.

fill - 填充颜色

stroke-width - 边框的宽度

stroke - 边框的颜色

stroke-opacity - 边框透明度

opacity - 矩形透明度

8 class - 使用的css样式名.

实例testSVG.html

SVG矩形

SVG矩形实例

矩形 #1: 不透明.

style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)">

矩形 #2: 透明

style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5">

矩形 #3: 有圆角

style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);">

输出

在Chrome浏览器上打开文件，你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件，在IE8里需要使用activeX控件才能看SVG图像。

SVG Rect矩形实例

SVG矩形的坐标解释

可能很多初学者对SVG矩形的坐标不太理解，下面通过一个实例给予解释一下。co-ordinate.html

SVG矩形坐标说明

SVG矩形坐标说明

style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)">

style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);

stroke-opacity:0.5;opacity:0.5">

style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);">

输出

SVG矩形坐标说明实例

坐标原点(0,0)是容器的起始位置，而矩形(rect)的坐标起点(矩形左上角)则是相对于原点(0,0)的位置。