SVG 圆形

SVG 元素

<circle> 元素用于绘制圆形。它是基本的 SVG 图形之一，由其圆心和半径定义。

这是一个带有黑色轮廓的红色圆形的简单示例：

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Circle Example</title>
</head>
<body>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</body>
</html>

代码解释：

cx: 定义圆心的 x 坐标。如果省略，默认为 0。
cy: 定义圆心的 y 坐标。如果省略，默认为 0。
r: 定义圆的半径。此属性是必需的，值小于或等于零将禁用圆的渲染。
stroke: 定义圆形轮廓的颜色（例如，“black”）。
stroke-width: 定义圆形轮廓的粗细（例如，“3”）。
fill: 定义圆形内部的颜色（例如，“red”）。如果未指定，默认填充通常为黑色，或指定为 ‘none’ 时为透明。

**应用：**圆形是许多设计的基础，用于点、按钮、图标，或作为图表、图示等更复杂插图的一部分。

**样式提示：**您还可以使用 CSS 为 SVG 元素设置样式。例如，您可以在 <style> 块或外部样式表中定义样式，并使用类或 ID 应用它们。