绘制圆形 circle

详细介绍SVG圆形circle元素的绑制方法，包括圆心坐标、半径等属性的设置。通过实际案例掌握圆形的各种用法，适合前端开发者学习SVG图形绑制。 圆形是最简单的 SVG 形状之一。<circle> 元素通过圆心和半径定义，适合绑制图标、指示器、数据点等。

基本语法

<circle cx="圆心x" cy="圆心y" r="半径"/>

属性说明

• cx：圆心的 x 坐标（默认 0）
• cy：圆心的 y 坐标（默认 0）
• r：圆的半径（必需）

基本圆形

<circle r="30" fill="#3498db"/>
<circle cx="100" r="30" fill="#e74c3c"/>
<circle cy="100" r="30" fill="#2ecc71"/>
<circle cx="100" cy="100" r="30" fill="#f39c12"/>
<circle cx="200" cy="50" r="40" fill="#9b59b6"/>
<circle cx="300" cy="75" r="50" fill="#1abc9c"/>

圆心定位

圆心坐标决定了圆的位置：

<circle cx="75" cy="75" r="40" fill="#3498db"/>
<circle cx="150" cy="75" r="40" fill="#e74c3c"/>
<circle cx="225" cy="75" r="40" fill="#2ecc71"/>

半径变化

半径决定了圆的大小：

<circle cx="50" cy="50" r="10" fill="#3498db"/>
<circle cx="120" cy="50" r="20" fill="#e74c3c"/>
<circle cx="210" cy="50" r="30" fill="#2ecc71"/>
<circle cx="320" cy="50" r="40" fill="#f39c12"/>

填充与描边

<circle cx="50" cy="50" r="35" fill="#3498db"/>
<circle cx="130" cy="50" r="35" fill="none" stroke="#e74c3c" stroke-width="3"/>
<circle cx="210" cy="50" r="35" fill="#2ecc71" stroke="#27ae60" stroke-width="3"/>
<circle cx="290" cy="50" r="35" fill="#f39c12" stroke="#e67e22" stroke-width="5"/>
<circle cx="370" cy="50" r="35" fill="#9b59b6" opacity="0.5"/>

实际应用案例

图标指示器

<circle r="8" fill="#e74c3c"/>
<circle r="8" fill="#f39c12"/>
<circle r="8" fill="#2ecc71"/>
<circle r="15" fill="#3498db"/>
<circle r="8" fill="white"/>
<circle r="12" fill="none" stroke="#9b59b6" stroke-width="3"/>

数据点

<polyline points="30,90 80,60 130,70 180,40 230,50 270,30" 
          fill="none" stroke="#3498db" stroke-width="2"/>
<circle cx="30" cy="90" r="5" fill="#3498db"/>
<circle cx="80" cy="60" r="5" fill="#3498db"/>
<circle cx="130" cy="70" r="5" fill="#3498db"/>
<circle cx="180" cy="40" r="5" fill="#e74c3c"/>
<circle cx="230" cy="50" r="5" fill="#3498db"/>
<circle cx="270" cy="30" r="5" fill="#3498db"/>

头像占位

<circle cx="50" cy="50" r="40" fill="#ecf0f1"/>
<circle cx="50" cy="40" r="15" fill="#bdc3c7"/>
<circle cx="50" cy="80" r="25" fill="#bdc3c7"/>

<circle cx="150" cy="50" r="40" fill="#3498db"/>
<text x="150" y="55" text-anchor="middle" fill="white" font-size="20">A</text>

同心圆效果

<circle cx="100" cy="100" r="90" fill="none" stroke="#3498db" stroke-width="1" opacity="0.3"/>
<circle cx="100" cy="100" r="70" fill="none" stroke="#3498db" stroke-width="1" opacity="0.5"/>
<circle cx="100" cy="100" r="50" fill="none" stroke="#3498db" stroke-width="1" opacity="0.7"/>
<circle cx="100" cy="100" r="30" fill="#3498db"/>

特殊效果

渐变圆

<defs>
  <radialGradient id="gradCircle">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#3498db"/>
  </radialGradient>
</defs>
<circle cx="100" cy="50" r="40" fill="url(#gradCircle)"/>

阴影效果

<defs>
  <filter id="circleShadow">
    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.3"/>
  </filter>
</defs>
<circle cx="100" cy="50" r="35" fill="#3498db" filter="url(#circleShadow)"/>

常见问题

Q: 圆形不显示？

A: 检查以下几点：

• r 属性是否设置且为正值
• 是否设置了 fill 或 stroke
• 圆心坐标是否在视口范围内

Q: 圆形超出边界？

A: 确保圆心坐标加减半径不超过视口范围：

cx - r >= 0
cx + r <= viewBox 宽度
cy - r >= 0
cy + r <= viewBox 高度

Q: 如何画半圆？

A: 使用 <path> 元素或裁剪：

<clipPath id="half">
  <rect y="0" width="100" height="50"/>
</clipPath>
<circle cx="50" cy="50" r="50" clip-path="url(#half)"/>

小结

圆形是最简单的 SVG 形状，通过 cx、cy、r 三个属性就能定义。圆形常用于图标、指示器、数据点等场景。配合填充、描边、渐变、滤镜等属性，可以创建丰富的视觉效果。