SVG中矩形用标签通过x、y、width、height等属性定义，圆形用标签通过cx、cy、r定义；二者均可使用fill、stroke等样式属性，而虽可模拟但更复杂，推荐初学者优先使用基础标签。
SVG 绘制矩形：用 标签直接定义
矩形是 SVG 中最基础的图形之一，使用
关键属性说明：
- x 和 y：指定矩形左上角在 SVG 坐标系中的位置（默认原点在左上角）
- width 和 height：必须设置，决定矩形大小
-
rx、ry：可选，用于设置圆角（如
rx="10" ry="10"得到标准圆角矩形） - fill、stroke、stroke-width：控制填充色、边框颜色与粗细
示例代码：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<svg width="200" height="150"><br> <rect x="20" y="30" width="120" height="60" fill="#4CAF50" stroke="#2E7D32" stroke-width="2"></rect><br></svg>
SVG 绘制圆形：用 标签最简洁
圆形无需计算路径点，
关键属性说明：
- cx 和 cy：圆心横纵坐标（不设时默认为 0,0）
- r：必填，表示半径长度（单位像素）
- 样式属性如 fill、stroke 等与 rect 一致，可自由组合
示例代码：
<svg width="200" height="150"><br> <circle cx="100" cy="75" r="40" fill="#2196F3" stroke="#1565C0" stroke-width="3"></circle><br></svg>
如果要用 path 模拟矩形或圆形
虽然不推荐日常使用（冗长且难读），但 SVG 的
矩形 path 写法（等效于 rect）：
（M=移动到起点，H=水平线，V=垂直线，Z=闭合）
圆形 path 写法（需用 A 命令画两个半圆拼接）：
（A 是椭圆弧命令；此处 rx=ry=40，构成正圆；两个半圆首尾相接）
注意：path 方式更灵活但复杂度高，初学建议优先用 rect/circle 标签。
实际使用小提醒
确保 SVG 容器有明确的 width 和 height，否则图形可能不可见；
所有坐标值默认单位为像素，无需写 "px"；
若图形没显示，先检查 cx/cy 或 x/y 是否超出容器范围；
fill="none" 可让图形仅描边不填充，适合强调轮廓。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
