详细介绍SVG路径的L线段命令,包括绝对坐标L和相对坐标l的用法。通过实例掌握如何绑制直线段。 线段命令用于绑制直线,是最常用的路径命令之一。
<path d="M 20,20 L 280,20 L 280,130 L 20,130 Z" fill="none" stroke="#3498db" stroke-width="2"/>
<path d="M 20,20 l 260,0 l 0,110 l -260,0 z" fill="#e74c3c" fill-opacity="0.3" stroke="#e74c3c"/>
L 命令可以连续使用:
<path d="M 20,80 L 60,20 L 100,80 L 140,20 L 180,80 L 220,20 L 260,80"
fill="none" stroke="#3498db" stroke-width="2"/>
连续的 L 命令可以省略字母:
<path d="M 20,80 L 60,20 100,80 140,20 180,80 220,20 260,80"
fill="none" stroke="#e74c3c" stroke-width="2"/>
<path d="M 100,20 L 180,100 L 20,100 Z" fill="#3498db"/>
<path d="M 100,10 L 120,70 L 180,70 L 130,110 L 150,170 L 100,130 L 50,170 L 70,110 L 20,70 L 80,70 Z"
fill="#f39c12"/>
<path d="M 20,20 L 180,20 M 20,50 L 180,50 M 20,80 L 180,80 M 20,110 L 180,110 M 20,140 L 180,140"
stroke="#3498db" stroke-width="1"/>
<path d="M 20,20 L 20,140 M 70,20 L 70,140 M 120,20 L 120,140 M 170,20 L 170,140"
stroke="#e74c3c" stroke-width="1"/>
L 命令用于绑制直线段,是最常用的路径命令。绝对坐标 L 相对于 SVG 原点,相对坐标 l 相对于当前位置。连续的 L 命令可以省略字母,使代码更简洁。