SVG <rect>

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。在SVG中，矩形是一种基本的形状，可以通过指定其位置、大小和样式来创建矩形图形。

创建矩形

要在SVG中创建一个矩形，可以使用<rect>元素。<rect>元素有四个属性：x、y、width和height，分别用于指定矩形的左上角坐标、宽度和高度。以下是一个简单的SVG矩形示例：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

在上面的示例中，我们创建了一个宽度为100px、高度为100px的SVG画布，并在其中绘制了一个左上角坐标为(10,10)，宽度为80px，高度为80px的红色矩形。

矩形样式

除了x、y、width和height属性外，<rect>元素还可以设置其他样式属性，如fill、stroke和stroke-width。fill属性用于设置矩形的填充颜色，stroke属性用于设置矩形的边框颜色，stroke-width属性用于设置矩形的边框宽度。以下是一个带有边框的矩形示例：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

在上面的示例中，我们创建了一个带有蓝色填充和黑色边框的矩形。

矩形圆角

SVG矩形还可以设置圆角，通过rx和ry属性可以指定矩形的水平和垂直圆角半径。以下是一个带有圆角的矩形示例：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" rx="10" ry="10" fill="green" />
</svg>

在上面的示例中，我们创建了一个带有水平和垂直圆角半径为10px的绿色矩形。

通过以上章节的介绍，你已经学会了如何在SVG中创建、样式化和设置圆角矩形。继续学习SVG的其他基本形状和高级特性，可以让你更好地掌握SVG图形的绘制和应用。