如何在<svg>中绘制简单的图形，如圆形、矩形？

一、引言

`SVG`（可缩放矢量图形）是一种用于描述二维图形的基于 XML 的格式。它具有可缩放性、清晰度和交互性等优点，广泛应用于网页设计、数据可视化和图标制作等领域。在本文中，我们将重点介绍如何在 `SVG` 中绘制简单的图形，如圆形和矩形，帮助你快速掌握 `SVG` 的基本绘图技巧。

二、绘制圆形

1. 基本语法

在 `SVG` 中，绘制圆形使用 `` 元素。其基本语法如下：

```html

```

其中，`cx` 和 `cy` 分别指定圆心的 x 坐标和 y 坐标，`r` 指定圆的半径。

2. 示例代码

以下是一个绘制半径为 50 的圆形的示例代码：

```html

```

在上述代码中，`width` 和 `height` 属性指定了 `SVG` 图像的宽度和高度，均为 100 像素。`` 元素的 `cx` 和 `cy` 属性都设置为 50，指定圆心位于图像的中心。`r` 属性设置为 50，指定圆的半径为 50 像素。

3. 样式设置

你可以通过 CSS 为圆形添加样式，如填充颜色、边框等。以下是一个设置圆形填充颜色为红色、边框宽度为 2 像素的示例代码：

```html

```

在上述代码中，`style` 属性用于设置圆形的样式。`fill` 属性指定填充颜色为红色，`stroke` 属性指定边框颜色为黑色，`stroke-width` 属性指定边框宽度为 2 像素。

三、绘制矩形

1. 基本语法

在 `SVG` 中，绘制矩形使用 `` 元素。其基本语法如下：

```html

```

其中，`x` 和 `y` 分别指定矩形左上角的 x 坐标和 y 坐标，`width` 指定矩形的宽度，`height` 指定矩形的高度。

2. 示例代码

以下是一个绘制宽度为 80、高度为 40 的矩形的示例代码：

```html

```

在上述代码中，`x` 属性设置为 10，`y` 属性设置为 30，指定矩形的左上角位于图像的 (10, 30) 位置。`width` 属性设置为 80，`height` 属性设置为 40，指定矩形的宽度为 80 像素，高度为 40 像素。

3. 样式设置

同样，你可以使用 CSS 为矩形添加样式。以下是一个设置矩形填充颜色为蓝色、边框宽度为 1 像素的示例代码：

```html

```

在上述代码中，`style` 属性用于设置矩形的样式。`fill` 属性指定填充颜色为蓝色，`stroke` 属性指定边框颜色为灰色，`stroke-width` 属性指定边框宽度为 1 像素。

四、总结

通过以上介绍，我们了解了如何在 `SVG` 中绘制简单的图形，如圆形和矩形。使用 `` 元素可以绘制圆形，通过设置 `cx`、`cy` 和 `r` 属性来控制圆心坐标和半径。使用 `` 元素可以绘制矩形，通过设置 `x`、`y`、`width` 和 `height` 属性来控制矩形的位置和大小。同时，我们还可以使用 CSS 为图形添加样式，如填充颜色、边框等，以满足不同的设计需求。

在实际应用中，你可以根据需要组合使用不同的图形元素和样式，创建出更加复杂和精美的 `SVG` 图像。`SVG` 具有强大的绘图能力和灵活性，是网页设计和数据可视化中不可或缺的工具之一。希望本文对你在 `SVG` 绘图方面有所帮助，让你能够轻松地创建出令人满意的图形效果。