SVG 圆

<circle> 元素用于绘制圆形，是 SVG 中最简单的形状之一。

基本语法

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#3b82f6"/>
</svg>

主要属性

属性	描述
cx	圆心 x 坐标（默认 0）
cy	圆心 y 坐标（默认 0）
r	圆的半径
fill	填充颜色
stroke	描边颜色
stroke-width	描边宽度

基础圆形

<svg width="400" height="150">
  <!-- 蓝色圆 -->
  <circle cx="60" cy="75" r="50" fill="#3b82f6"/>
  
  <!-- 绿色圆 -->
  <circle cx="180" cy="75" r="50" fill="#22c55e"/>
  
  <!-- 红色圆 -->
  <circle cx="300" cy="75" r="50" fill="#ef4444"/>
</svg>

不同大小的圆

<svg width="400" height="200">
  <circle cx="40" cy="100" r="20" fill="#3b82f6"/>
  <circle cx="110" cy="100" r="35" fill="#22c55e"/>
  <circle cx="200" cy="100" r="50" fill="#f59e0b"/>
  <circle cx="310" cy="100" r="65" fill="#8b5cf6"/>
</svg>

带描边的圆

<svg width="400" height="150">
  <!-- 只有描边 -->
  <circle cx="60" cy="75" r="45" 
          fill="none" stroke="#3b82f6" stroke-width="3"/>
  
  <!-- 填充 + 描边 -->
  <circle cx="180" cy="75" r="45" 
          fill="#bfdbfe" stroke="#3b82f6" stroke-width="4"/>
  
  <!-- 虚线描边 -->
  <circle cx="300" cy="75" r="45" 
          fill="none" stroke="#ef4444" stroke-width="3"
          stroke-dasharray="10,5"/>
</svg>

透明圆形

<svg width="250" height="200">
  <!-- 重叠的半透明圆 -->
  <circle cx="80" cy="80" r="60" fill="#3b82f6" opacity="0.6"/>
  <circle cx="130" cy="80" r="60" fill="#ef4444" opacity="0.6"/>
  <circle cx="105" cy="130" r="60" fill="#22c55e" opacity="0.6"/>
</svg>

同心圆

<svg width="200" height="200">
  <circle cx="100" cy="100" r="90" fill="#3b82f6"/>
  <circle cx="100" cy="100" r="70" fill="#60a5fa"/>
  <circle cx="100" cy="100" r="50" fill="#93c5fd"/>
  <circle cx="100" cy="100" r="30" fill="#bfdbfe"/>
  <circle cx="100" cy="100" r="10" fill="white"/>
</svg>

使用 CSS 样式

<style>
  .circle-hover {
    fill: #3b82f6;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .circle-hover:hover {
    fill: #1d4ed8;
    transform-origin: center;
    transform: scale(1.1);
  }
</style>

<svg width="150" height="150">
  <circle class="circle-hover" cx="75" cy="75" r="50"/>
</svg>

圆形动画

<svg width="400" height="150">
  <!-- 半径动画 -->
  <circle cx="60" cy="75" r="30" fill="#3b82f6">
    <animate attributeName="r" values="30;50;30" dur="1s" repeatCount="indefinite"/>
  </circle>
  
  <!-- 颜色动画 -->
  <circle cx="180" cy="75" r="40" fill="#22c55e">
    <animate attributeName="fill" 
             values="#22c55e;#3b82f6;#ef4444;#22c55e" 
             dur="2s" repeatCount="indefinite"/>
  </circle>
  
  <!-- 移动动画 -->
  <circle cx="300" cy="75" r="30" fill="#8b5cf6">
    <animate attributeName="cx" values="280;350;280" dur="1.5s" repeatCount="indefinite"/>
  </circle>
</svg>

实际应用示例

加载动画（旋转圆点）

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="15" r="8" fill="#3b82f6" opacity="1"/>
  <circle cx="75" cy="25" r="8" fill="#3b82f6" opacity="0.85"/>
  <circle cx="85" cy="50" r="8" fill="#3b82f6" opacity="0.7"/>
  <circle cx="75" cy="75" r="8" fill="#3b82f6" opacity="0.55"/>
  <circle cx="50" cy="85" r="8" fill="#3b82f6" opacity="0.4"/>
  <circle cx="25" cy="75" r="8" fill="#3b82f6" opacity="0.25"/>
  <circle cx="15" cy="50" r="8" fill="#3b82f6" opacity="0.15"/>
  <circle cx="25" cy="25" r="8" fill="#3b82f6" opacity="0.05"/>
</svg>

圆形进度指示器

<svg width="120" height="120" viewBox="0 0 120 120">
  <!-- 背景圆 -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#e5e7eb" stroke-width="10"/>
  <!-- 进度圆 -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#3b82f6" stroke-width="10"
          stroke-dasharray="235" stroke-dashoffset="70"
          transform="rotate(-90 60 60)"/>
  <!-- 中心文字 -->
  <text x="60" y="65" text-anchor="middle" font-size="24" font-weight="bold" fill="#1f2937">
    70%
  </text>
</svg>

头像占位符

<svg width="80" height="80">
  <!-- 背景圆 -->
  <circle cx="40" cy="40" r="40" fill="#e5e7eb"/>
  <!-- 头部 -->
  <circle cx="40" cy="32" r="14" fill="#9ca3af"/>
  <!-- 身体 -->
  <circle cx="40" cy="70" r="20" fill="#9ca3af"/>
</svg>

红绿灯

<svg width="60" height="160">
  <!-- 外框 -->
  <rect x="5" y="5" width="50" height="150" rx="10" fill="#374151"/>
  <!-- 红灯 -->
  <circle cx="30" cy="35" r="18" fill="#991b1b"/>
  <!-- 黄灯 -->
  <circle cx="30" cy="80" r="18" fill="#854d0e"/>
  <!-- 绿灯（亮） -->
  <circle cx="30" cy="125" r="18" fill="#22c55e"/>
</svg>

社交按钮

<svg width="50" height="50">
  <circle cx="25" cy="25" r="24" fill="#1da1f2"/>
  <text x="25" y="32" text-anchor="middle" fill="white" font-size="20" font-weight="bold">
    T
  </text>
</svg>

下一步

学会了圆形，接下来让我们学习 SVG 椭圆 的绘制！