• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

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

作者：

贺及楼

成为作者

更新日期：2025-02-27 13:00:38

矢量图形 - 基本形状 - 绘制 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 圆形：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>SVG 圆形示例</title>
  8. </head>
  10. <body>
  11.     <!-- 创建一个 SVG 画布 -->
  12.     <svg width="200" height="200">
  13.         <!-- 绘制一个圆形 -->
  14.         <circle cx="100" cy="100" r="50" fill="blue" stroke="black" stroke-width="2" />
  15.     </svg>
  16. </body>
  18. </html>

代码解释

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

多个圆形的绘制

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>多个 SVG 圆形示例</title>
  8. </head>
  10. <body>
  11.     <svg width="300" height="300">
  12.         <!-- 第一个圆形 -->
  13.         <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="2" />
  14.         <!-- 第二个圆形 -->
  15.         <circle cx="200" cy="200" r="30" fill="green" stroke="black" stroke-width="1" />
  16.     </svg>
  17. </body>
  19. </html>

代码解释

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

总结

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

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