h5页面中可用原生svg标签绘制基础几何图形：矩形用（x/y定位、width/height定尺寸、rx/ry设圆角），圆形用（cx/cy定圆心、r定半径），直线用（x1/y1到x2/y2），均需包裹在内并设宽高。

在 H5 页面中直接使用 SVG 标签绘制基础几何图形非常简单，无需额外库，只要写对标签结构和关键属性即可。

绘制矩形（rect）

用 标签，通过 x、y 定位左上角，width 和 height 控制尺寸：

• x：距 SVG 左边缘的距离
• y：距 SVG 顶边缘的距离（注意：SVG 坐标系 y 向下为正）
• rx、ry 可选，添加圆角（如 rx="10"）

示例：

  

绘制圆形（circle）

用 标签，cx 和 cy 表示圆心坐标，r 是半径：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 圆心默认在 (0,0)，所以必须显式设置 cx/cy，否则可能显示不全
• fill 控制填充色，stroke + stroke-width 控制边框

示例：

  

绘制直线（line）

用 标签，指定起点（x1, y1）和终点（x2, y2）：

• 线段本身无宽度，需用 stroke-width 设置粗细
• 必须设 stroke 才能看见（fill 对 line 无效）
• 可加 stroke-linecap（如 "round"）让端点变圆润

示例：

  

所有 SVG 图形都需包裹在 标签内，并建议明确设置 width/height；属性值单位默认是像素，无需写 "px"。不复杂但容易忽略坐标原点和 stroke 的必要性。