绘制直线 line

详细介绍SVG直线line元素的绑制方法，包括起点终点坐标、描边样式等属性的设置。通过实际案例掌握直线的各种用法，适合前端开发者学习SVG图形绑制。 直线是最简单的 SVG 形状。<line> 元素通过两个端点定义一条线段，适合绑制分隔线、连接线、坐标轴等。

基本语法

<line x1="起点x" y1="起点y" x2="终点x" y2="终点y"/>

属性说明

• x1：起点 x 坐标（默认 0）
• y1：起点 y 坐标（默认 0）
• x2：终点 x 坐标（默认 0）
• y2：终点 y 坐标（默认 0）

基本直线

<line x1="20" y1="20" x2="180" y2="20" stroke="#3498db" stroke-width="2"/>
<line x1="20" y1="50" x2="180" y2="80" stroke="#e74c3c" stroke-width="2"/>
<line x1="20" y1="80" x2="180" y2="50" stroke="#2ecc71" stroke-width="2"/>
<line x1="100" y1="100" x2="100" y2="140" stroke="#f39c12" stroke-width="2"/>
<line x1="220" y1="20" x2="380" y2="140" stroke="#9b59b6" stroke-width="2"/>
<line x1="220" y1="140" x2="380" y2="20" stroke="#1abc9c" stroke-width="2"/>

必须设置描边

直线没有填充，必须设置 stroke 属性才能显示：

<line x1="20" y1="40" x2="280" y2="40" stroke="#3498db" stroke-width="2"/>

描边样式

线宽 stroke-width

<line x1="20" y1="20" x2="380" y2="20" stroke="#3498db" stroke-width="1"/>
<line x1="20" y1="40" x2="380" y2="40" stroke="#e74c3c" stroke-width="3"/>
<line x1="20" y1="60" x2="380" y2="60" stroke="#2ecc71" stroke-width="5"/>
<line x1="20" y1="80" x2="380" y2="80" stroke="#f39c12" stroke-width="8"/>

线帽 stroke-linecap

<line x1="50" y1="30" x2="350" y2="30" stroke="#3498db" stroke-width="15" stroke-linecap="butt"/>
<line x1="50" y1="70" x2="350" y2="70" stroke="#e74c3c" stroke-width="15" stroke-linecap="round"/>
<line x1="50" y1="110" x2="350" y2="110" stroke="#2ecc71" stroke-width="15" stroke-linecap="square"/>

虚线 stroke-dasharray

<line x1="20" y1="20" x2="380" y2="20" stroke="#3498db" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="20" y1="40" x2="380" y2="40" stroke="#e74c3c" stroke-width="2" stroke-dasharray="10,5"/>
<line x1="20" y1="60" x2="380" y2="60" stroke="#2ecc71" stroke-width="2" stroke-dasharray="20,10,5,10"/>
<line x1="20" y1="80" x2="380" y2="80" stroke="#f39c12" stroke-width="2" stroke-dasharray="5,5,1,5"/>

实际应用案例

分隔线

<text x="150" y="25" text-anchor="middle" font-size="14">标题内容</text>
<line x1="50" y1="40" x2="250" y2="40" stroke="#e0e0e0" stroke-width="1"/>
<text x="150" y="65" text-anchor="middle" font-size="12">正文内容区域</text>

坐标轴

<line x1="50" y1="180" x2="280" y2="180" stroke="#333" stroke-width="2"/>
<line x1="50" y1="20" x2="50" y2="180" stroke="#333" stroke-width="2"/>
<line x1="280" y1="180" x2="270" y2="175" stroke="#333" stroke-width="2"/>
<line x1="280" y1="180" x2="270" y2="185" stroke="#333" stroke-width="2"/>
<line x1="50" y1="20" x2="45" y2="30" stroke="#333" stroke-width="2"/>
<line x1="50" y1="20" x2="55" y2="30" stroke="#333" stroke-width="2"/>

连接线

<circle cx="50" cy="60" r="20" fill="#3498db"/>
<circle cx="150" cy="30" r="20" fill="#e74c3c"/>
<circle cx="150" cy="90" r="20" fill="#2ecc71"/>
<circle cx="250" cy="60" r="20" fill="#f39c12"/>
<line x1="70" y1="60" x2="130" y2="35" stroke="#666" stroke-width="2"/>
<line x1="70" y1="60" x2="130" y2="85" stroke="#666" stroke-width="2"/>
<line x1="170" y1="35" x2="230" y2="60" stroke="#666" stroke-width="2"/>
<line x1="170" y1="85" x2="230" y2="60" stroke="#666" stroke-width="2"/>

删除线效果

<text x="100" y="35" text-anchor="middle" font-size="20" fill="#999">原价 ¥999</text>
<line x1="30" y1="30" x2="170" y2="30" stroke="#e74c3c" stroke-width="2"/>

刻度线

<line x1="20" y1="50" x2="280" y2="50" stroke="#333" stroke-width="2"/>
<line x1="20" y1="40" x2="20" y2="60" stroke="#333" stroke-width="2"/>
<line x1="85" y1="45" x2="85" y2="55" stroke="#333" stroke-width="1"/>
<line x1="150" y1="40" x2="150" y2="60" stroke="#333" stroke-width="2"/>
<line x1="215" y1="45" x2="215" y2="55" stroke="#333" stroke-width="1"/>
<line x1="280" y1="40" x2="280" y2="60" stroke="#333" stroke-width="2"/>

特殊效果

渐变线条

<defs>
  <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db"/>
    <stop offset="100%" stop-color="#e74c3c"/>
  </linearGradient>
</defs>
<line x1="20" y1="30" x2="280" y2="30" stroke="url(#lineGrad)" stroke-width="4" stroke-linecap="round"/>

发光效果

<defs>
  <filter id="glow">
    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
    <feMerge>
      <feMergeNode in="coloredBlur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</defs>
<line x1="20" y1="30" x2="280" y2="30" stroke="#3498db" stroke-width="3" filter="url(#glow)"/>

常见问题

Q: 直线不显示？

A: 检查以下几点：

• 是否设置了 stroke 属性
• 起点和终点是否相同（相同则不显示）
• 坐标是否在视口范围内

Q: 如何画水平线？

A: 设置 y1 和 y2 相同：

<line x1="0" y1="50" x2="200" y2="50" stroke="#333"/>

Q: 如何画垂直线？

A: 设置 x1 和 x2 相同：

<line x1="100" y1="0" x2="100" y2="200" stroke="#333"/>

Q: 直线和路径有什么区别？

A: <line> 只能画直线段，<path> 可以画任意形状。如果只需要直线，用 <line> 更简洁。

小结

直线是最简单的 SVG 形状，通过两个端点定义。直线没有填充，必须设置 stroke 属性才能显示。配合 stroke-width、stroke-linecap、stroke-dasharray 等属性，可以创建丰富的线条效果。