详细介绍SVG路径的M移动命令,包括绝对坐标M和相对坐标m的用法。通过实例掌握如何设置路径起点。 移动命令用于设置路径的起点,不会绑制任何线条。
<path d="M 50,50 L 250,50" stroke="#3498db" stroke-width="2"/>
<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"/>
<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 相对于当前位置。可以在路径中多次使用移动命令创建多个不连续的图形。