html5中svg绘图核心是直接使用标签嵌入图形元素，无需javascript；矩形用、圆形用、椭圆用、直线用、多边形用、任意形状用，均支持fill、stroke等样式属性。

HTML5 中用 SVG 绘制基础几何图形，核心是直接在 HTML 里写 `

矩形（含圆角）

用 `` 标签，通过 `x`、`y` 定位左上角，`width` 和 `height` 控制尺寸。加 `rx` 和 `ry` 就能做出圆角效果。

• 普通矩形：<rect x="20" y="30" width="120" height="80" fill="#4a90e2"></rect>
• 圆角矩形：设 rx="15" ry="15"，四个角等半径；若 rx="20" ry="10"，则呈现椭圆角效果

圆形与椭圆

圆形用 ``，关键属性是圆心坐标 `cx`/`cy` 和半径 `r`；椭圆用 ``，用 `rx`（x 方向半轴）、`ry`（y 方向半轴）分别控制长宽。

Html2md

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

下载

• 正圆：<circle cx="100" cy="100" r="40" fill="#e74c3c"></circle>
• 椭圆：<ellipse cx="100" cy="180" rx="60" ry="25" fill="#2ecc71"></ellipse> —— 水平拉伸明显

直线与多边形

`` 两点确定一条线段；`` 用 `points` 属性列出多个坐标点（空格或逗号分隔），自动闭合成形。

• 斜线：<line x1="50" y1="50" x2="150" y2="120" stroke="#9b59b6" stroke-width="2"></line>
• 三角形：<polygon points="100,40 60,120 140,120" fill="#f39c12"></polygon>

路径（path）——灵活绘制任意形状

`` 是最通用的绘图工具，靠 `d` 属性里的指令串定义轨迹。常用命令：`M`（移动到）、`L`（直线到）、`Z`（闭合）。

• 等边三角形路径：<path d="M80,30 L40,100 L120,100 Z" fill="#1abc9c"></path>
• 五角星可拆解为 10 个点，用 `L` 连续绘制，结尾加 `Z` 自动封口

所有图形都支持 `fill`（填充色）、`stroke`（描边色）、`stroke-width`（边线粗细）、`opacity`（透明度）等样式属性，也可用 CSS 类统一控制。注意 SVG 坐标原点在左上角，`y` 值增大表示向下移动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！