SVG中<circle>用cx、cy、r定义圆心与半径，<ellipse>用cx、cy、rx、ry定义中心与两轴半长；均基于左上原点坐标系，不支持百分比单位，需注意溢出截断与旋转中心问题。
SVG 中的 <circle> 和 <ellipse> 是最基础的矢量图形元素，绘制关键在于准确理解其坐标系逻辑和属性含义，而非单纯记忆语法。
Circle 圆形：用圆心 + 半径定义
<circle> 只需三个核心属性：cx（圆心 X 坐标）、cy（圆心 Y 坐标）、r（半径）。所有值均为数值，单位默认为用户坐标系单位（通常等同于像素）。
-
cx和cy默认为 0，若不设置，圆心落在画布左上角（即原点），可能被截断 -
r必须为非负数；设为 0 时渲染为一个点，设为负数将被忽略且不渲染 - 例如：
<circle cx="100" cy="80" r="30" fill="blue"/>表示在 (100, 80) 处画一个半径 30 的实心蓝圆
Ellipse 椭圆：用圆心 + 两轴半长定义
<ellipse> 由四个关键属性控制：cx、cy（中心点）、rx（X 轴方向半长）、ry（Y 轴方向半长）。
-
rx和ry分别决定椭圆在水平与垂直方向的“伸展程度”，二者相等时即为正圆（等价于<circle>） - 若只设
rx或只设ry，未指定的另一半轴默认为 0，图形不可见 - 例如：
<ellipse cx="200" cy="120" rx="50" ry="25" fill="orange" stroke="black" stroke-width="2"/>绘制一个横向拉伸的橙色椭圆
坐标系与常见误区提醒
SVG 使用左上为原点的笛卡尔坐标系（Y 轴向下为正），这与数学常规不同，直接影响 cy 的取值感知。
立即学习“前端免费学习笔记（深入）”；
- 圆/椭圆不会因
fill="none"或无fill而消失——只要设置了描边（stroke），轮廓仍可见 -
cx/cy和rx/ry不支持百分比值（如rx="50%"），也不接受 em、rem 等 CSS 单位，仅接受数字或带单位的长度（如rx="3cm"，但需注意 viewBox 缩放影响） - 若图形边缘“消失”，优先检查
cx/cy是否超出<svg>宽高范围，或是否被overflow="hidden"截断
样式与交互基础支持
两者均完全支持 SVG 图形通用样式属性，可直接添加 fill、stroke、stroke-width、opacity、transform 等。
- 支持 CSS 类名（
class="dot"）和内联样式（style="fill:red"） - 可绑定事件，如
@click（在 HTML 中配合 JS）或<set>动画触发 - 可通过
transform="rotate(45)"旋转，但注意旋转中心默认为原点——如需绕自身中心转，应配合transform="translate(cx,cy) rotate(45) translate(-cx,-cy)"
