SVG <rect> 画矩形
SVG <rect>元素代表一个矩形。使用此元素，您可以绘制具有各种宽度，高度，不同笔触（轮廓）和填充颜色，尖角或圆角等的矩形。
在线示例
一个rect使用示例:
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="10"y="10"height="100"width="100"style="stroke:#006600;fill:#00cc00"/></svg>测试看看 ‹/›
矩形 的位置由x和y属性确定。请记住，此位置是相对于任何封闭的（父）元素位置而言的。
矩形的大小由width和height 属性确定。
该style属性允许您设置其他样式信息，例如笔触和填充颜色，笔触的宽度等。这将在其他文本中更详细地介绍。
这是生成的矩形图像:
圆角矩形
可以在矩形上绘制圆角。属性rx和ry 确定拐角处的圆角。rx属性确定舍入的宽度，而ry属性确定舍入的高度。这里有三个矩形与 rx和ry分别都设置为5，10和15。注意四舍五入中的不同大小.
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="10"y="10"height="50"width="50"rx="5"ry="5"style="stroke:#006600;fill:#00cc00"/><rectx="70"y="10"height="50"width="50"rx="10"ry="10"style="stroke:#006600;fill:#00cc00"/><rectx="130"y="10"height="50"width="50"rx="15"ry="15"style="stroke:#006600;fill:#00cc00"/></svg>测试看看 ‹/›
生成的圆角矩形效果如下:
在这些示例中，每个矩形中的rx和ry设置为相同的值。如果仅设置rx属性，则ry属性将获得与相同的值rx。这是定义均匀圆角的快捷方式。
这是两个将rx属性都设置为10，但将ry 属性分别设置为5和15的示例。这将向您展示在不同的高度和宽度下，圆角矩形的外观。
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="10"y="10"height="50"width="50"rx="10"ry="5"style="stroke:#006600;fill:#00cc00"/><rectx="130"y="10"height="50"width="50"rx="10"ry="15"style="stroke:#006600;fill:#00cc00"/></svg>测试看看 ‹/›
矩形描边
您可以使用SVG stroke样式属性设置矩形的边框（轮廓）样式。本示例将stroke颜色设置为深绿色，并将边框宽度设置为3:
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="20"y="20"width="100"height="100"style="stroke:#009900;stroke-width:3;fill:none;"/></svg>测试看看 ‹/›
rect在浏览器中显示时,该元素的外观效果如下:
您也可以使用style属性stroke-dasharray使矩形边框变为虚线。示例如下:
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="20"y="20"width="100"height="100"style="stroke:#009900;stroke-width:3;stroke-dasharray:105;fill:none;"/></svg>测试看看 ‹/›
以上代码运行效果如下::
矩形填充
您可以使用SVG填充样式属性填充矩形。例如，您可以rect通过将style属性fill设置为none，来选择不填充元素。
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="20"y="20"width="100"height="100"style="stroke:#009900;fill:none;"/></svg>测试看看 ‹/›
这是rect在浏览器中呈现时,没有填充的元素的外观:
您也可以选择用颜色填充矩形。此示例rect用明亮的绿色填充元素:
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="20"y="20"width="100"height="100"style="stroke:#009900;fill:#33ff33;"/></svg>测试看看 ‹/›
以下是rect在浏览器中,填充后显示的效果:
您还可以使用style属性fill-opacity使填充透明。此示例显示了两个矩形，一个矩形部分在另一个矩形的顶部，而顶部的矩形是半透明的:
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="20"y="20"width="100"height="100"style="stroke:#009900;fill:#33ff33;"/><rectx="50"y="50"width="100"height="100"style="stroke:#000099;fill:#3333ff;fill-opacity:0.5;"/></svg>测试看看 ‹/›
这是rect在浏览器中呈现时元素的半透明的外观效果:
在此示例中，第二个矩形的笔触不是透明的，但是您可以使用style属性stroke-opacity使其透明。