HTML 中 line 线条的使用与特性

2025-12-22 8548阅读

在网页设计中，HTML 的 line 线条元素（<line>）虽然看似简单，但却有着独特的作用。它可以为网页增添一些简洁而又重要的视觉元素。

基本语法与属性

<line> 元素用于在 SVG（可缩放矢量图形）中绘制直线。其基本语法如下：

<svg width="100" height="100">
  <line x1="0" y1="0" x2="100" y2="100" style="stroke:black;stroke-width:2"/>
</svg>

这里，x1 和 y1 定义了直线起点的坐标，x2 和 y2 定义了直线终点的坐标。style 属性中，stroke 表示线条的颜色，stroke-width 表示线条的宽度。

常见应用场景

分隔内容

在一些信息展示类的网页中，我们可以用 line 线条来分隔不同的内容区域。比如一个产品介绍页面，不同功能模块之间用一条简单的线条隔开，能让页面结构更清晰。

<svg width="300" height="200">
  <line x1="50" y1="50" x2="250" y2="50" style="stroke:gray;stroke-width:1"/>
  <!-- 这里绘制了一条水平分隔线 -->
</svg>

装饰性元素

可以将 line 线条与其他 SVG 元素结合，制作一些装饰性的图案。例如，绘制一个简单的网格背景：

<svg width="200" height="200">
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:lightgray;stroke-width:1"/>
  <line x1="0" y1="50" x2="200" y2="50" style="stroke:lightgray;stroke-width:1"/>
  <line x1="0" y1="100" x2="200" y2="100" style="stroke:lightgray;stroke-width:1"/>
  <line x1="0" y1="150" x2="200" y2="150" style="stroke:lightgray;stroke-width:1"/>
  <line x1="0" y1="200" x2="200" y2="200" style="stroke:lightgray;stroke-width:1"/>

  <line x1="0" y1="0" x2="0" y2="200" style="stroke:lightgray;stroke-width:1"/>
  <line x1="50" y1="0" x2="50" y2="200" style="stroke:lightgray;stroke-width:1"/>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke:lightgray;stroke-width:1"/>
  <line x1="150" y1="0" x2="150" y2="200" style="stroke:lightgray;stroke-width:1"/>
  <line x1="200" y1="0" x2="200" y2="200" style="stroke:lightgray;stroke-width:1"/>
</svg>

数据可视化辅助

在简单的数据可视化中，line 线条可以用来表示坐标轴的刻度线等。比如绘制一个简单的折线图的坐标轴：

<svg width="300" height="200">
  <line x1="50" y1="180" x2="250" y2="180" style="stroke:black;stroke-width:2"/> <!-- x 轴 -->
  <line x1="50" y1="20" x2="50" y2="180" style="stroke:black;stroke-width:2"/> <!-- y 轴 -->

  <!-- 绘制 x 轴刻度线 -->
  <line x1="70" y1="180" x2="70" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="90" y1="180" x2="90" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="110" y1="180" x2="110" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="130" y1="180" x2="130" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="150" y1="180" x2="150" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="170" y1="180" x2="170" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="190" y1="180" x2="190" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="210" y1="180" x2="210" y2="185" style="stroke:black;stroke-width:1"/>
  <line x1="230" y1="180" x2="230" y2="185" style="stroke:black;stroke-width:1"/>

  <!-- 绘制 y 轴刻度线 -->
  <line x1="50" y1="20" x2="55" y2="20" style="stroke:black;stroke-width:1"/>
  <line x1="50" y1="40" x2="55" y2="40" style="stroke:black;stroke-width:1"/>
  <line x1="50" y1="60" x2="55" y2="60" style="stroke:black;stroke-width:1"/>
  <line x1="50" y1="80" x2="55" y2="80" style="stroke:black;stroke-width:1"/>
  <line x1="50" y1="100" x2="55" y2="100" style="stroke:black;stroke-width:1"/>
  <line x1="50" y1="120" x2="55" y2="120" style="stroke:black;stroke-width:1"/>
  <line x1="50" y1="140" x2="55" y2="140" style="stroke:black;stroke-width:1"/>
  <line x1="50" y1="160" x2="55" y2="160" style="stroke:black;stroke-width:1"/>
</svg>