M/m 移动命令

详细介绍SVG路径的M移动命令,包括绝对坐标M和相对坐标m的用法。通过实例掌握如何设置路径起点。 移动命令用于设置路径的起点,不会绑制任何线条。

命令格式

  • M x,y:移动到绝对坐标 (x, y)
  • m dx,dy:移动到相对坐标(当前位置 + dx, +dy)

基本用法

绝对坐标 M

M 50,50 起点在 (50,50)
<path d="M 50,50 L 250,50" stroke="#3498db" stroke-width="2"/>

相对坐标 m

M 50,50 m 50,0 相对移动 50px
<path d="M 50,50 m 50,0 L 250,50" stroke="#e74c3c" stroke-width="2"/>

多次移动

可以在路径中多次使用移动命令,创建多个不连续的图形:

<path d="M 30,30 L 80,30 L 80,70 L 30,70 Z 
         M 120,30 L 170,30 L 170,70 L 120,70 Z 
         M 210,30 L 260,30 L 260,70 L 210,70 Z" 
      fill="#3498db" fill-opacity="0.5" stroke="#3498db"/>

移动命令的特点

  1. 不绑制线条:只移动画笔位置
  2. 必须作为起点:路径必须以 M 或 m 开始
  3. 可以多次使用:创建多个子路径

常见用法

创建多个图形

<path d="M 50,50 L 70,20 L 90,50 Z 
         M 150,50 L 170,20 L 190,50 Z 
         M 250,50 L 270,20 L 290,50 Z" 
      fill="#e74c3c"/>

相对移动链

相对移动创建阶梯
<path d="M 20,50 m 20,-20 l 40,0 m 20,20 l 40,0 m 20,-20 l 40,0 m 20,20 l 40,0" 
      stroke="#2ecc71" stroke-width="2" fill="none"/>

小结

移动命令 M/m 用于设置路径起点,是路径的必需命令。绝对坐标 M 相对于 SVG 原点,相对坐标 m 相对于当前位置。可以在路径中多次使用移动命令创建多个不连续的图形。