矢量图形 - 基本形状 - 绘制 SVG 圆形

在前端开发中，SVG（可缩放矢量图形）是一种强大的工具，它允许我们创建高质量的、可缩放的图形。SVG 图形在不同的设备和屏幕分辨率下都能保持清晰锐利，不会出现像素化的问题。本文将详细介绍如何使用 SVG 绘制圆形，并通过实际的演示代码帮助大家更好地理解。

什么是 SVG 圆形

SVG 圆形是 SVG 中最基本的形状之一，它通过 <circle> 元素来表示。<circle> 元素可以在 SVG 画布上绘制一个完美的圆形。与位图图像不同，SVG 圆形是由数学公式定义的，因此无论放大或缩小，它都能保持清晰的边缘和精确的形状。

`<circle>` 元素的属性

<circle> 元素有几个重要的属性，用于定义圆形的位置和大小：
| 属性 | 描述 |
| —— | —— |
| cx | 圆形中心点的 x 坐标，默认值为 0。 |
| cy | 圆形中心点的 y 坐标，默认值为 0。 |
| r | 圆形的半径，必须是一个正数。 |
| fill | 圆形的填充颜色，默认值为 black。可以使用颜色名称、十六进制值或 RGB 值。 |
| stroke | 圆形的边框颜色，默认值为 none。 |
| stroke-width | 圆形边框的宽度，默认值为 1。 |

演示代码

下面是一个简单的示例，展示了如何使用 <circle> 元素绘制一个 SVG 圆形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 圆形示例</title>
</head>
<body>
    <!-- 创建一个 SVG 画布 -->
    <svg width="200" height="200">
        <!-- 绘制一个圆形 -->
        <circle cx="100" cy="100" r="50" fill="blue" stroke="black" stroke-width="2" />
    </svg>
</body>
</html>

代码解释

<svg> 元素：创建一个 SVG 画布，width 和 height 属性分别设置画布的宽度和高度。
<circle> 元素：在 SVG 画布上绘制一个圆形。
- cx="100"：圆形中心点的 x 坐标为 100。
- cy="100"：圆形中心点的 y 坐标为 100。
- r="50"：圆形的半径为 50。
- fill="blue"：圆形的填充颜色为蓝色。
- stroke="black"：圆形的边框颜色为黑色。
- stroke-width="2"：圆形边框的宽度为 2。

多个圆形的绘制

我们可以在同一个 SVG 画布上绘制多个圆形，只需添加多个 <circle> 元素即可。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个 SVG 圆形示例</title>
</head>
<body>
    <svg width="300" height="300">
        <!-- 第一个圆形 -->
        <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="2" />
        <!-- 第二个圆形 -->
        <circle cx="200" cy="200" r="30" fill="green" stroke="black" stroke-width="1" />
    </svg>
</body>
</html>

代码解释

在这个示例中，我们在同一个 SVG 画布上绘制了两个圆形。第一个圆形的中心点坐标为 (100, 100)，半径为 50，填充颜色为红色；第二个圆形的中心点坐标为 (200, 200)，半径为 30，填充颜色为绿色。

总结

通过使用 <circle> 元素，我们可以轻松地在 SVG 画布上绘制圆形。只需设置 cx、cy 和 r 属性，就可以定义圆形的位置和大小；使用 fill、stroke 和 stroke-width 属性，可以设置圆形的填充颜色、边框颜色和边框宽度。SVG 圆形是一种非常实用的矢量图形，在前端开发中有着广泛的应用。

希望本文能帮助你更好地理解如何使用 SVG 绘制圆形。如果你有任何问题或建议，欢迎在下方留言。

矢量图形 - 基本形状 - 绘制 SVG 圆形