直接用 <path></path> 元素 + d 属性就能画，但写错一个字母或坐标顺序，路径就消失、错位或缩成一个点——这不是浏览器问题，是命令解析中断了。

path 的 d 属性必须按「命令+坐标」严格拼接

d 不是自由字符串，而是浏览器逐字符解析的指令流。M 后必须跟两个数字，C 后必须跟六位数字（两组控制点+终点），Z 后不能跟任何数字。大小写敏感：大写是绝对坐标，小写是相对当前点偏移。

• 常见错误：d="M10 10 L20 20 Z50 50" —— Z 后多写了坐标，Z 之后的 50 50 会被忽略，但后续命令若存在，可能因解析错位而失效
• 漏空格也危险：d="M10,10L20,20" 在部分旧浏览器中会解析失败；稳妥写法是M 10 10 L 20 20或M 10,10 L 20,20
• 相对命令（如 l, c）依赖上一坐标，首次使用前没 M 就会从 (0,0) 开始，图形常“飞走”

画直线/三角形/闭合图形用 M + L + Z 最稳

这是入门最不易出错的组合，适合图标、箭头、多边形等。所有坐标用大写命令，位置完全可控。

• M 50 50：画笔移到 (50, 50)
• L 150 50：画直线到 (150, 50)
• L 100 150：再画直线到 (100, 150)
• Z：自动连回起点 (50, 50)，闭合路径

完整示例：<path d="M 50 50 L 150 50 L 100 150 Z" fill="orange" stroke="black" stroke-width="2"></path>

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

画曲线优先选 Q（二次贝塞尔）而非 C（三次）

Q 只需一个控制点，参数少、易调试；C 要两个控制点，稍一调错就严重变形。手绘感、弧线图标、简单波浪线用 Q 足够。

• Q cx cy x y：从当前点出发，以 (cx, cy) 为控制点，落到 (x, y)
• 控制点越远，曲线越“甩”；靠近终点，曲线越平缓
• 示例（拱桥）：M 0 100 Q 200 0 400 100 —— 起点(0,100)，终点(400,100)，控制点在正上方(200,0)

圆/椭圆别硬算贝塞尔，用 A 命令更准且简洁

想画标准圆弧、饼图切片、进度环？别拆成 4 段 C 曲线。A 命令原生支持椭圆弧，参数虽多但逻辑清晰：起点→半径→旋转→大弧/小弧→顺/逆时针→终点。

• 关键参数：A rx ry x-axis-rotation large-arc sweep x y
• large-arc=0 表示≤180°弧，sweep=1 表示顺时针画弧
• 画半圆（右半）示例：M 100 100 A 50 50 0 1 1 100 200 —— 从(100,100)出发，x/y半径都是50，不旋转，大弧，顺时针，终点(100,200)

真正容易被忽略的是：A 命令的起点必须由前面的 M/L 等命令明确给出，它自己不定义起点；而且前后两点距离不能超过两倍半径，否则解析失败静默跳过。

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