SVG 矩形学习笔记

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维矢量图形的XML标记语言。在SVG中，矩形是最基本的图形之一。

创建矩形

在SVG中，我们可以通过<rect>标签来创建矩形。<rect>标签有四个属性：x、y、width和height，分别代表矩形左上角点的x坐标、y坐标，以及矩形的宽度和高度。

下面是一个简单的SVG矩形示例：

htmlCopy Code
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100"/>
</svg>

这段代码会在浏览器中渲染出一个200x200的画布，并在其中绘制一个左上角点坐标为(50,50)，宽100、高100的矩形。

矩形属性

除了x、y、width和height属性外，<rect>标签还提供了一些其他的属性，用于控制矩形的样式和行为。

fill和stroke属性

fill属性用于设置矩形的填充颜色，stroke属性用于设置矩形的描边颜色。

htmlCopy Code
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red" stroke="black"/>
</svg>

这段代码会在浏览器中渲染出一个红色填充、黑色描边的矩形。

rx和ry属性

rx和ry属性用于设置矩形的圆角半径。如果只设置了rx属性，则矩形的四个角都会变成圆角；如果同时设置了rx和ry属性，则可以分别设置矩形四个角的圆角半径。

htmlCopy Code
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" rx="20" ry="10" fill="blue" stroke="black"/>
</svg>

这段代码会在浏览器中渲染出一个蓝色填充、黑色描边，左上角和右下角为20px的半径，右上角和左下角为10px的半径的圆角矩形。

实例

下面是一个完整的SVG矩形示例，包含了多个属性的设置：

htmlCopy Code
<svg width="400" height="200">
  <rect x="50" y="50" width="200" height="100" rx="20" ry="20"
        fill="#4caf50" stroke="#212121" stroke-width="2"/>
  <rect x="100" y="80" width="100" height="40"
        fill="#ffc107" stroke="#212121" stroke-width="2"/>
  <rect x="150" y="100" width="20" height="20"
        fill="#f44336" stroke="#212121" stroke-width="2"/>
</svg>

这段代码会在浏览器中渲染出一个宽400、高200的画布，并在其中绘制了三个矩形：

• 第一个矩形：左上角点坐标为(50,50)，宽200、高100，圆角半径为20的矩形，填充颜色为绿色，描边颜色为黑色，描边宽度为2。
• 第二个矩形：左上角点坐标为(100,80)，宽100、高40的矩形，填充颜色为黄色，描边颜色为黑色，描边宽度为2。
• 第三个矩形：左上角点坐标为(150,100)，宽20、高20的矩形，填充颜色为红色，描边颜色为黑色，描边宽度为2。

以上就是SVG矩形的学习笔记和一个简单的示例。希望对你有所帮助！