SVG基本图形绘制关键在坐标理解与属性规范：rect的x/y为左上角，circle/cx/cy/r缺一不可，ellipse需rx和ry同时指定，line必须设置stroke才可见。
SVG 绘制基本图形不难，关键在坐标理解与属性写法。初学者常因坐标系习惯错位、属性遗漏或单位误用导致图形不显示或位置偏移——不是代码写错了，而是默认行为没搞清。
rect 矩形：x/y 是左上角，不是中心
矩形用 <rect> 标签，x 和 y 定义左上顶点位置，width 和 height 向右、向下延伸。比如 <rect x="20" y="30" width="100" height="60"> 表示从画布左上起 20px 横向、30px 纵向处开始画一个 100×60 的矩形。
- 想居中？得手动计算：x = (svg宽度 − width) / 2，y = (svg高度 − height) / 2
- 圆角靠 rx 和 ry：两者都需显式设置，缺一不可；若只写
rx="10"而不写 ry，浏览器按 ry="0" 处理，结果无圆角甚至不渲染 - fill 填充颜色，stroke + stroke-width 控制边框；width 或 height 为 0 时图形不可见
circle 圆形：cx/cy 必须显式指定
圆形用 <circle>，核心是 cx（圆心横坐标）、cy（圆心纵坐标）和 r（半径）。三者缺一不可，且 cx、cy 默认为 0，r 默认为 0 —— 若只写 <circle r="40">，圆心就在左上角，大概率被裁掉。
- 安全写法：确保 cx ≥ r 且 cy ≥ r，例如 SVG 宽高均为 200，要画居中圆，就写
cx="100" cy="100" r="40" - r 必须是非负数；r="−5" 或 r="0%" 都无效，会被忽略
- 所有坐标值（cx、cy、r）都不支持百分比，必须是纯数字，如
cx="100"，不能写cx="50%"
ellipse 椭圆：rx 和 ry 缺一不可
椭圆用 <ellipse>，参数结构类似 circle，但用 rx（水平半径）和 ry（垂直半径）代替 r。它没有“默认半径”概念，rx 和 ry 必须同时存在且为正数。
-
<ellipse cx="80" cy="60" rx="30" ry="20">才能正常显示；漏掉 ry 或设为 0，图形直接消失，也不报错 - rx="0" 或 ry="0" → 图形不可见；负值同理，静默忽略
- 注意坐标系：cy 增大，图形向下移动——这和数学直角坐标系相反，但符合 SVG 规范
line 直线：起点终点明确，stroke 不可省
直线用 <line>，靠 x1/y1（起点）和 x2/y2（终点）定位。它本身没有面积，所以 fill 无效，必须用 stroke 设置颜色，否则看不见。
- 常见错误：写了 line 却没加 stroke，结果页面空白；加上
stroke="black"或stroke="#333"才能显示 - 可用 stroke-width 控制粗细，stroke-opacity 调透明度
- line 是开放路径，不自动闭合；如需折线或多段连接，改用 <polyline> 或 <path>
