L/l 线段命令

详细介绍SVG路径的L线段命令,包括绝对坐标L和相对坐标l的用法。通过实例掌握如何绑制直线段。 线段命令用于绑制直线,是最常用的路径命令之一。

命令格式

  • L x,y:画直线到绝对坐标 (x, y)
  • l dx,dy:画直线到相对坐标(当前位置 + dx, +dy)

基本用法

绝对坐标 L

<path d="M 20,20 L 280,20 L 280,130 L 20,130 Z" fill="none" stroke="#3498db" stroke-width="2"/>

相对坐标 l

相对坐标绑制
<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 命令可以省略字母:

省略 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 命令可以省略字母,使代码更简洁。