📅 最后修改于: 2023-12-03 14:47:46.325000 🧑 作者: Mango
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，可用于在网页上显示图形。其中，圆形元素就是一种常见的基本形状元素，可以用来创建圆形或者部分圆形。
定义一个圆形，需要用到 <circle> 标签，并在其中设置相应的属性值，如下所示:
<svg>
<circle cx="50" cy="50" r="30" stroke="black" stroke-width="2" fill="red" />
</svg>
上述代码将会在 <svg> 元素内绘制一个圆形，其中 cx 和 cy 是圆心的坐标值，r 表示半径，stroke 和 stroke-width 则表示边框的颜色和宽度，fill 则表示填充的颜色。
除了基本属性之外， <circle> 还支持一些其他的属性，如下表所示：
属性名 | 描述 -|- cx | 定义圆心 x 坐标 cy | 定义圆心 y 坐标 r | 定义圆的半径 stroke | 定义描边颜色 stroke-width | 定义描边宽度 fill | 定义填充颜色 opacity | 定义透明度(0 - 1) transform | 定义 2D 转换，比如移动、旋转和缩放等 id | 定义元素的唯一 ID class | 定义元素的类名 ...
通常，我们会将 SVG 图形嵌入到 HTML 中，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>SVG Circle Example</title>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="30" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
</html>
上述代码展示了一个红色圆形， 边框颜色为黑色，宽度为 2 个像素。
SVG 圆形元素是一种常见的基本形状元素，通过设置基本属性，可以轻松地定义圆的大小、位置、边框和填充等。在实际应用中，圆形元素通常与其他形状元素组合使用，实现更加丰富的 SVG 图形效果。