SVG <circle> 圆形最全实战手册（2025 版）
记住这一个标签，你就能画 95% 的圆形需求！
1. 核心语法（就 3 个属性，背下来！）
<circle cx="圆心X" cy="圆心Y" r="半径" />| 属性 | 含义 | 默认值 | 常用值 |
|---|---|---|---|
| cx | 圆心水平坐标 | 0 | 100、50%、50 |
| cy | 圆心垂直坐标 | 0 | 100、50%、50 |
| r | 半径（必填） | 无 | 40、50%、100 |
2. 2025 年最常用的 10 种写法（直接复制）
<!-- 1. 最基础圆 -->
<circle cx="100" cy="100" r="80" fill="#4a6fe3"/>
<!-- 2. 纯边框圆（图标常用） -->
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
<!-- 3. 圆环（进度圈必备） -->
<circle cx="50" cy="50" r="40" fill="none" stroke="#e0e0e0" stroke-width="12"/>
<circle cx="50" cy="50" r="40" fill="none" stroke="#0066ff" stroke-width="12"
stroke-dasharray="251.2" stroke-dashoffset="80"/> <!-- 251.2 = 2π×40 -->
<!-- 4. 实心可改色圆点（配合 currentColor） -->
<circle cx="12" cy="12" r="8" fill="currentColor"/>
<!-- 5. 响应式铺满容器圆 -->
<circle cx="50%" cy="50%" r="45%" fill="#ff5a5f"/>
<!-- 6. 带动画的呼吸灯 -->
<circle cx="100" cy="100" r="30" fill="#0066ff" opacity="0.8">
<animate attributeName="r" values="20;40;20" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0.3;1" dur="3s" repeatCount="indefinite"/>
</circle>
<!-- 7. 渐变填充圆 -->
<defs>
<radialGradient id="grad">
<stop offset="0%" stop-color="#ff8a00"/>
<stop offset="100%" stop-color="#da1b60"/>
</radialGradient>
</defs>
<circle cx="150" cy="80" r="60" fill="url(#grad)"/>
<!-- 8. 1px 超细边框（高清屏神器） -->
<circle cx="100" cy="100" r="50" fill="none" stroke="#000"
stroke-width="0.5" vector-effect="non-scaling-stroke"/>
<!-- 9. 虚线圆（加载动画常用） -->
<circle cx="100" cy="100" r="80" fill="none" stroke="#0066ff" stroke-width="8"
stroke-dasharray="20 10" opacity="0.6"/>
<!-- 10. 点击水波纹效果（配合 JS） -->
<circle cx="100" cy="100" r="0" fill="none" stroke="#0066ff" stroke-width="4">
<animate attributeName="r" from="0" to="100" dur="1s" fill="freeze"/>
<animate attributeName="opacity" from="0.8" to="0" dur="1s"/>
</circle>3. 2025 必备技巧速查表
| 需求 | 关键代码 | 备注 |
|---|---|---|
| 完美居中 | cx="50%" cy="50%" | viewBox 里最常用 |
| 做进度圈 | stroke-dasharray="周长 周长" | 周长 = 2 × π × r |
| 计算周长（JS） | let c = 2 * Math.PI * r | 比如 r=40 → 251.327 |
| 让圆永远 1px 边框 | vector-effect="non-scaling-stroke" | 高清屏必加 |
| 鼠标 hover 放大 | CSS :hover circle { r: 60 } | 行内 SVG 才能这么玩 |
| 做头像默认占位图 | <circle fill="#e0e0e0"/> + <text> 组合 | 见下例 |
4. 经典头像占位图（复制即用）
<svg viewBox="0 0 120 120" width="120" height="120">
<circle cx="60" cy="60" r="58" fill="#e0e0e0"/>
<circle cx="60" cy="45" r="20" fill="#fff"/>
<path d="M30 100 Q60 130 90 100" stroke="#fff" stroke-width="16" fill="none"/>
</svg>一句话总结（2025 金句）：
图标用 <circle fill="none" stroke="currentColor"/> + 进度圈用 stroke-dasharray + 装饰圆用渐变 + 呼吸灯用 <animate> → 这四招走遍天下！
需要我现在就发你「50 个最常用纯 <circle> 图标包（全部支持 currentColor 改色）」或「完整进度圈组件代码（支持任意百分比）」吗？一键复制就能用！
