svg基础图形中，的x/y定位左上角而非中心，的cx/cy默认为0易致截断，的rx/ry必须同时显式设置；三者均基于左上原点坐标系，不支持百分比单位。
<rect></rect>、<circle></circle>、<ellipse></ellipse> 是 SVG 中最常用的三个基础图形标签，直接写在 <svg></svg> 容器内就能渲染，无需 JS 或额外库。
rect 绘制矩形时 x/y 是左上角，不是中心
很多人误以为 <rect></rect> 的 x 和 y 指的是中心点，结果图形“偏了”。实际上它们定位的是矩形左上角顶点。比如 <rect x="0" y="0" width="100" height="60"></rect> 会紧贴 SVG 左上边界绘制。
- 若想让矩形水平居中，需手动计算：
x = (svg宽度 - width) / 2 -
y同理，垂直居中要算(svg高度 - height) / 2 -
width和height不能为负；设为 0 时不可见，设为负数会被忽略 - 边框用
stroke+stroke-width，填充用fill，两者可同时存在
circle 的 cx/cy 默认是 0,0，容易被裁掉
<circle></circle> 的 cx 和 cy 默认值是 0，意味着圆心落在 SVG 左上角。只要 r > 0，圆的大部分就会超出画布——看起来像只画了个小弧。
- 确保
cx ≥ r且cy ≥ r，否则圆的一部分被截断（SVG 不会自动裁剪内容，而是直接不显示越界部分） -
r必须是非负数；r="0"渲染为一个点，r="-10"无效且无报错 - 不要用百分比单位：
cx="50%"不合法，所有坐标和长度都必须是纯数字（如cx="100"）
ellipse 的 rx/ry 都必须显式设置
<ellipse></ellipse> 看似和 <circle></circle> 类似，但更严格：如果漏写 rx 或 ry，浏览器会按默认值 0 处理，导致图形消失。
-
rx和ry缺一不可；只写rx="50"而不写ry，等价于ry="0"→ 不渲染 -
rx="0"或ry="0"同样不可见；负值被忽略，不报错也不渲染 - 当
rx == ry时，<ellipse></ellipse>视觉上等同于<circle></circle>，但语法不同，DOM 中也不同 - 坐标系仍是左上原点，
cy增大表示向下移动，这点和数学直觉相反，容易调错位置
真正容易被忽略的是坐标系逻辑：SVG 所有基础图形都基于左上为 (0,0) 的笛卡尔坐标系，Y 轴向下为正。这不是 bug，是规范；但一旦习惯 CSS 或 Canvas 的“居中锚点”思维，就极易在 cy 和 y 上反复试错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
