rect的x/y定位左上角而非中心，circle的cx/cy默认为0易致截断，ellipse的rx/ry必须同时显式设置；三者均基于左上原点坐标系，不支持百分比单位。
rect 的 x/y 是左上角，不是中心点
很多人写 <rect x="50" y="50" width="100" height="60"></rect> 时以为矩形会以 (50, 50) 为中心，结果图形“飘”到左上角去了。实际 x/y 定义的是左上顶点坐标，整个矩形向右、向下延伸。
想让矩形水平居中？得手动算：x = (svg宽度 - width) / 2；垂直居中同理：y = (svg高度 - height) / 2。
-
width和height必须 ≥ 0；设为负数会被忽略，设为 0 则不可见 - 边框用
stroke+stroke-width，填充用fill，两者可共存 - 不支持百分比：
x="50%"是非法的，必须写成x="100"这样的纯数字
circle 的 cx/cy 默认是 0,0，容易被裁掉
<circle r="40"></circle> 看似简单，但没写 cx 和 cy 就等于 cx="0" cy="0"——圆心钉死在 SVG 左上角。只要 r > 0，圆就会大面积越界，浏览器直接不渲染越出画布的部分，看起来像“只画了一小段弧”或者干脆没显示。
安全做法是确保：cx ≥ r 且 cy ≥ r。例如 SVG 宽高都是 200，想画个半径 40 的圆居中，就得写 cx="100" cy="100"。
-
r必须是非负数；r="0"渲染为一个点，r="-20"无效且静默忽略 - 所有坐标值（
cx、cy、r）都不接受百分比单位 - DOM 中
<circle></circle>和<ellipse rx="40" ry="40"></ellipse>视觉一样，但结构不同，脚本取值或样式覆盖时要注意
ellipse 的 rx/ry 缺一不可
<ellipse cx="100" cy="80" rx="50"></ellipse> 看起来只漏写了 ry，但浏览器会按 ry="0" 处理——结果就是啥也不画。SVG 不报错，也不警告，图形直接消失。
rx 和 ry 是并列必需属性，哪怕你想画正圆，也得显式写全：<ellipse cx="100" cy="100" rx="30" ry="30"></ellipse>。
-
rx="0"或ry="0"→ 图形不可见；负值同理，被忽略 - 和
<circle></circle>一样，cx/cy默认是 0，不设就从左上角开始算位置 - Y 值增大 = 向下移动，这点和数学坐标系相反，调试时
cy调大却看到图形往下跑，别怀疑，这是对的
所有基础图形共享同一套坐标逻辑
无论是 <rect></rect>、<circle></circle> 还是 <ellipse></ellipse>，它们都基于左上角为原点 (0, 0) 的笛卡尔坐标系，Y 轴正方向朝下。这不是 bug，是 SVG 规范本身的设计，但恰恰是初学者最常反复踩坑的地方——尤其当刚写完 CSS transform 或 Canvas 的居中逻辑后立刻切到 SVG，y 和 cy 的直觉会彻底反着来。
真正难调试的不是语法写错，而是坐标系理解偏差导致的位置偏移。比如想把一个 <circle r="20"></circle> 垂直居中到 SVG 高度一半处，写成 cy="50%" 不行，写成 cy="100"（假设 SVG 高 200）才对；更关键的是，这个 “100” 指的是从顶部往下 100 像素，不是从中心往上或往下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
