SVG <rect> 画矩形
rect元素是SVG的一个基本形状，用来创建矩形，基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。
SVG <rect>元素代表一个矩形。使用此元素，您可以绘制具有各种宽度，高度，不同笔触（轮廓）和填充颜色，尖角或圆角等的矩形。
在线示例
一个rect使用示例:
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="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。注意四舍五入中的不同大小.
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600; fill: #00cc00"/> <rect x="70" y="10" height="50" width="50" rx="10" ry="10" style="stroke:#006600; fill: #00cc00"/> <rect x="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的示例。这将向您展示在不同的高度和宽度下，圆角矩形的外观。
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="50" width="50" rx="10" ry="5" style="stroke:#006600; fill: #00cc00"/> <rect x="130" y="10" height="50" width="50" rx="10" ry="15" style="stroke:#006600; fill: #00cc00"/></svg>
测试看看 ‹/›
矩形描边
您可以使用SVG stroke样式属性设置矩形的边框（轮廓）样式。本示例将stroke颜色设置为深绿色，并将边框宽度设置为3:
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900; stroke-width: 3; fill: none; " /></svg>
测试看看 ‹/›
rect在浏览器中显示时,该元素的外观效果如下:
您也可以使用style属性stroke-dasharray使矩形边框变为虚线。示例如下:
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900; stroke-width: 3; stroke-dasharray: 10 5; fill: none; " /></svg>
测试看看 ‹/›
以上代码运行效果如下::
矩形填充
您可以使用SVG填充样式属性填充矩形。例如，您可以rect通过将style属性fill设置为none，来选择不填充元素。
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900;fill: none;" /></svg>
测试看看 ‹/›
这是rect在浏览器中呈现时,没有填充的元素的外观:
您也可以选择用颜色填充矩形。此示例rect用明亮的绿色填充元素:
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900;fill: #33ff33;"/></svg>
测试看看 ‹/›
以下是rect在浏览器中,填充后显示的效果:
您还可以使用style属性fill-opacity使填充透明。此示例显示了两个矩形，一个矩形部分在另一个矩形的顶部，而顶部的矩形是半透明的:
示例
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="20" y="20" width="100" height="100" style="stroke: #009900; fill: #33ff33; " /><rect x="50" y="50" width="100" height="100" style="stroke: #000099; fill: #3333ff; fill-opacity: 0.5; " /></svg>
测试看看 ‹/›
这是rect在浏览器中呈现时元素的半透明的外观效果:
在此示例中，第二个矩形的笔触不是透明的，但是您可以使用style属性stroke-opacity使其透明。