svg基本图形绘制关键在坐标理解与属性规范：rect的x/y为左上角，circle/cx/cy/r缺一不可，ellipse需rx和ry同时指定，line必须设置stroke才可见。

SVG 绘制基本图形不难，关键在坐标理解与属性写法。初学者常因坐标系习惯错位、属性遗漏或单位误用导致图形不显示或位置偏移——不是代码写错了，而是默认行为没搞清。

rect 矩形：x/y 是左上角，不是中心

矩形用 标签，x 和 y 定义左上顶点位置，width 和 height 向右、向下延伸。比如 <rect x="20" y="30" width="100" height="60"></rect> 表示从画布左上起 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 必须显式指定

圆形用 ，核心是 cx（圆心横坐标）、cy（圆心纵坐标）和 r（半径）。三者缺一不可，且 cx、cy 默认为 0，r 默认为 0 —— 若只写 <circle r="40"></circle>，圆心就在左上角，大概率被裁掉。

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

• 安全写法：确保 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 缺一不可

椭圆用 ，参数结构类似 circle，但用 rx（水平半径）和 ry（垂直半径）代替 r。它没有“默认半径”概念，rx 和 ry 必须同时存在且为正数。

• <ellipse cx="80" cy="60" rx="30" ry="20"></ellipse> 才能正常显示；漏掉 ry 或设为 0，图形直接消失，也不报错
• rx="0" 或 ry="0" → 图形不可见；负值同理，静默忽略
• 注意坐标系：cy 增大，图形向下移动——这和数学直角坐标系相反，但符合 SVG 规范

line 直线：起点终点明确，stroke 不可省

直线用 ，靠 x1/y1（起点）和 x2/y2（终点）定位。它本身没有面积，所以 fill 无效，必须用 stroke 设置颜色，否则看不见。

• 常见错误：写了 line 却没加 stroke，结果页面空白；加上 stroke="black" 或 stroke="#333" 才能显示
• 可用 stroke-width 控制粗细，stroke-opacity 调透明度
• line 是开放路径，不自动闭合；如需折线或多段连接，改用 或