H5页面中可用原生SVG标签绘制基础几何图形：矩形用<rect>（x/y定位、width/height定尺寸、rx/ry设圆角），圆形用<circle>（cx/cy定圆心、r定半径），直线用<line>（x1/y1到x2/y2），均需包裹在<svg>内并设宽高。
在 H5 页面中直接使用 SVG 标签绘制基础几何图形非常简单，无需额外库，只要写对标签结构和关键属性即可。
绘制矩形（rect）
用 <rect> 标签，通过 x、y 定位左上角，width 和 height 控制尺寸：
- x：距 SVG 左边缘的距离
- y：距 SVG 顶边缘的距离（注意：SVG 坐标系 y 向下为正）
-
rx、ry 可选，添加圆角（如
rx="10"）
示例：
<svg width="200" height="100"><rect x="20" y="10" width="120" height="60" fill="#4CAF50" stroke="#333" stroke-width="2"/>
</svg>
绘制圆形（circle）
用 <circle> 标签，cx 和 cy 表示圆心坐标，r 是半径：
- 圆心默认在 (0,0)，所以必须显式设置 cx/cy，否则可能显示不全
- fill 控制填充色，stroke + stroke-width 控制边框
示例：
<svg width="150" height="150"><circle cx="75" cy="75" r="40" fill="#2196F3" stroke="#fff" stroke-width="3"/>
</svg>
绘制直线（line）
用 <line> 标签，指定起点（x1, y1）和终点（x2, y2）：
- 线段本身无宽度，需用 stroke-width 设置粗细
- 必须设 stroke 才能看见（fill 对 line 无效）
- 可加 stroke-linecap（如 "round"）让端点变圆润
示例：
<svg width="200" height="100"><line x1="20" y1="20" x2="180" y2="80" stroke="#FF5722" stroke-width="3" stroke-linecap="round"/>
</svg>
所有 SVG 图形都需包裹在 <svg> 标签内，并建议明确设置 width/height；属性值单位默认是像素，无需写 "px"。不复杂但容易忽略坐标原点和 stroke 的必要性。
