m和l是svg中基础路径指令，m移动画笔到指定点不绘线，l从当前点画直线到目标点；二者组合可构建折线、多边形等轮廓，需注意坐标格式、大小写敏感及z闭合显式声明。

M 和 L 是 SVG <path></path> 中最基础、最常用的路径指令，分别代表“移动到（Move to）”和“画直线到（Line to）”。它们不绘制曲线或弧线，只构建折线或封闭轮廓的骨架，是理解整个 SVG 路径语法的起点。

M 命令：定位起始点（不画线）

M 后面跟一对坐标（x y），作用是把“画笔”抬起来，移到指定位置，为后续绘图做准备。它本身不产生任何可见线条。

• M 只影响当前路径的起点，不影响之前已绘制的内容
• 一个 path 中可以出现多个 M，每次都会重置当前点，开启新子路径（subpath）
• 示例：M 10 20 表示将画笔移到 (10, 20)；M 10 20 M 50 60 表示先移到 (10,20)，再移到 (50,60)，形成两个独立起点

L 命令：从当前点画直线到目标点

L 后面也是一对坐标（x y），作用是从“当前点”（即上一个命令结束的位置）向该坐标画一条直线段。L 必须在 M 之后（或其它能确立当前点的命令之后）才有意义。

• 如果当前点未定义（比如 path 以 L 开头），浏览器会尝试忽略该 L 或报错，实际渲染不可靠
• L 是绝对坐标指令；对应的小写 l 表示相对坐标（例如 l 20 30 表示向右20、向下30）
• 连续多个 L 可省略字母，如 M 10 10 L 30 10 L 30 40 可简写为 M 10 10 L 30 10 30 40

M + L 组合绘制矩形、三角形等基本图形

仅用 M 和 L 就能构建任意多边形轮廓。关键在于首尾坐标的处理：

• 画三角形：M 20 10 L 40 50 L 0 50 Z（Z 表示闭合路径，自动连回起点）
• 画不闭合折线：M 10 10 L 30 20 L 20 40（终点不连回起点）
• 画两个分离矩形：M 10 10 L 60 10 L 60 40 L 10 40 Z M 80 10 L 130 10 L 130 40 L 80 40 Z

注意事项与常见误区

M 和 L 看似简单，但初学者易在细节上出错：

• 坐标间允许空格或逗号分隔，但不能混用混乱（如 M 10,20L30,40 合法，M 10,20 L30,40 也合法；但 M 10,20L 30,40 中空格位置不当可能被部分解析器误判）
• 数字支持小数和负数，如 M -10.5 20.3 L 0 0
• 路径中字母大小写敏感：M/L 是绝对坐标，m/l 是相对坐标，不可互换
• 没有“自动补全起点”机制——Z 指令必须显式写出才能闭合，否则只是开放路径

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