学习使用SVG创建可交互式长方形图形

# 1. 引言

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。相比传统的基于位图的图像格式（如JPEG、PNG），SVG使用了一种描述性的方式来绘制图形，使得图像在放大或缩小时不会失真。在Web开发和数据可视化领域，SVG逐渐受到人们的关注和应用。

### 1.1 什么是SVG？

SVG是一种基于XML的标记语言，用于描述二维图形和图形应用程序。与像素图形不同，SVG图形是可以被放大缩小而不失真的矢量图形。这使得SVG成为在不同分辨率和大小的屏幕上均能保持清晰度的理想选择。

### 1.2 SVG的优势及应用场景

- **清晰度**：SVG图像可以在不同分辨率下保持清晰度，适用于高清屏幕和打印品质要求高的场景。
- **可编辑性**：SVG图形是文本文件，可以通过代码或编辑工具轻松进行修改和定制。
- **交互性**：SVG图形可以与HTML、CSS和JavaScript进行深度集成，实现更多交互功能。
- **动画效果**：通过CSS和JavaScript，SVG图形可以实现丰富的动画效果，增强用户体验。

SVG广泛应用于数据可视化、图标设计、地图绘制、动画制作等领域，为Web开发者和设计师提供了丰富的创作空间。

# 2. SVG基础知识

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。相比于传统的基于像素的图像格式，如JPEG、PNG等，SVG图像可以随着图像尺寸的改变而保持清晰度，因此在实现可缩放的图形和图表时非常有优势。

### 2.1 SVG图形结构

SVG图形结构由各种形状元素和属性组成，常见的形状元素包括：
- `<rect>`：矩形
- `<circle>`：圆形
- `<line>`：直线
- `<path>`：路径
- `<text>`：文本

属性可以控制图形的外观样式，如颜色、填充、边框等。

### 2.2 SVG属性和样式基础

在SVG中，可以通过属性来控制图形的样式，如：
- `fill`：填充颜色
- `stroke`：边框颜色
- `stroke-width`：边框宽度
- `opacity`：透明度
- `transform`：变换（平移、旋转、缩放）

通过这些属性，可以实现各种各样的图形效果。另外，可以使用CSS样式表和JavaScript来进一步控制和定制SVG图形的外观与行为。

SVG提供了丰富的图形绘制能力，同时也支持与HTML和CSS的集成，使得在Web开发中更加灵活和强大。

# 3. 创建长方形图形

在SVG中，长方形是一种常见的基本形状，通过`<rect>`标签可以很容易地创建长方形。

### 3.1 使用<rect>标签创建长方形

要创建一个长方形，需要使用SVG的`<rect>`标签，并指定长方形的位置、大小等属性。下面是一个简单的示例代码：

<svg width="200" height="100">
  <rect x="50" y="20" width="100" height="50" fill="blue" />
</svg>

在这段代码中，我们定义了一个200x100大小的SVG画布，然后在其中创建了一个长方形，起始点坐标为`(50, 20)`，宽度为100，高度为50，填充颜色为蓝色。

### 3.2 长方形的基本属性设置

除了上面示例中的`x`、`y`、`width`、`height`和`fill`属性外，长方形还有许多其他属性可以设置，比如：

- `stroke`: 边框颜色
- `stroke-width`: 边框宽度
- `opacity`: 透明度
- `rx`和`ry`: 圆角边框的半径

可以通过设置这些属性，来调整长方形的外观和样式，使其更符合实际需求。

通过这些基础知识，我们可以轻松创建各种形状的长方形，并根据需要进行样式和属性的调整。

# 4. 添