svg中与的核心差异在于坐标系理解：原点在左上角，cx/cy为绝对坐标，r或rx/ry需匹配svg宽高防溢出，且均不支持百分比单位。
<circle></circle> 和 <ellipse></ellipse> 的核心差异不在语法复杂度，而在于坐标系理解是否到位——画不出来、位置偏移、图形消失，90% 是因为没意识到 SVG 原点在左上角，且所有数值都是绝对坐标。
为什么 <circle></circle> 圆心设了却“不见”？
默认 cx 和 cy 都是 0，圆心落在 SVG 左上角；若 r 较大，圆的大部分会溢出画布上边和左边，视觉上像“没画出来”。
-
cx、cy必须显式设置为合理值（例如至少大于r），否则圆被截断 -
r为负数会被浏览器忽略，设为 0 则渲染成一个像素点，不是“无显示” - 检查父级
<svg></svg>的width和height是否足够容纳cx ± r和cy ± r - 不要用
fill="none"就以为图形消失了——只要加了stroke，轮廓依然可见
为什么 <ellipse></ellipse> 只写 rx 没反应？
<ellipse></ellipse> 要求 rx 和 ry 同时为正数才可见；漏掉任一属性，对应半轴默认为 0，结果就是一条线或完全不可见。
-
rx="50"但没写ry→ry默认为 0 → 椭圆压扁成水平线段（可能看不见） -
rx和ry相等时，<ellipse></ellipse>等价于<circle></circle>，但不推荐混用——语义不清且多写一个属性 - 两者都不支持百分比：
rx="50%"无效；也不接受em、rem，只认数字或带单位长度（如rx="2cm"，但需配合viewBox才可控缩放）
旋转椭圆/圆形时中心偏移怎么办？
transform="rotate(30)" 默认绕 SVG 原点（左上角）转，不是绕自身中心。要实现“绕自己转”，必须手动平移补偿。
- 正确写法示例：
transform="translate(100,80) rotate(45) translate(-100,-80)"（假设圆心是cx="100" cy="80"） - 别依赖 CSS 的
transform-origin：SVG 元素对这个属性支持不一致，尤其在嵌套或响应式场景下容易失效 - 如果用了
viewBox，注意所有坐标值都映射进该逻辑坐标系，translate中的数值也要按比例换算
最常被跳过的细节是：SVG 坐标系 Y 轴向下为正，cy 增大 = 图形往下移；而数学直觉常让人误以为 cy 大了会上移。这点一旦错，整个布局就全偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
