SVG 线条
<line> 元素用于绘制直线，是连接两点的最简单方式。
基本语法
html
<svg width="200" height="100">
<line x1="10" y1="10" x2="190" y2="90" stroke="#3b82f6" stroke-width="2"/>
</svg>主要属性
| 属性 | 描述 |
|---|---|
x1 | 起点 x 坐标 |
y1 | 起点 y 坐标 |
x2 | 终点 x 坐标 |
y2 | 终点 y 坐标 |
stroke | 线条颜色 |
stroke-width | 线条宽度 |
stroke-linecap | 线条端点样式 |
stroke-dasharray | 虚线样式 |
注意
<line> 元素必须设置 stroke 属性才能显示，因为线条没有填充区域。
基础线条
html
<svg width="300" height="150">
<!-- 水平线 -->
<line x1="10" y1="30" x2="290" y2="30" stroke="#3b82f6" stroke-width="2"/>
<!-- 垂直线 -->
<line x1="150" y1="10" x2="150" y2="140" stroke="#22c55e" stroke-width="2"/>
<!-- 对角线 -->
<line x1="10" y1="140" x2="290" y2="10" stroke="#ef4444" stroke-width="2"/>
</svg>不同粗细的线条
html
<svg width="300" height="120">
<line x1="10" y1="20" x2="290" y2="20" stroke="#3b82f6" stroke-width="1"/>
<line x1="10" y1="40" x2="290" y2="40" stroke="#3b82f6" stroke-width="2"/>
<line x1="10" y1="60" x2="290" y2="60" stroke="#3b82f6" stroke-width="4"/>
<line x1="10" y1="85" x2="290" y2="85" stroke="#3b82f6" stroke-width="8"/>
<line x1="10" y1="110" x2="290" y2="110" stroke="#3b82f6" stroke-width="12"/>
</svg>线条端点样式 (stroke-linecap)
html
<svg width="300" height="150">
<!-- butt（默认）：平直端点 -->
<line x1="30" y1="30" x2="270" y2="30"
stroke="#3b82f6" stroke-width="15" stroke-linecap="butt"/>
<text x="150" y="55" text-anchor="middle" font-size="12">butt（默认）</text>
<!-- round：圆形端点 -->
<line x1="30" y1="80" x2="270" y2="80"
stroke="#22c55e" stroke-width="15" stroke-linecap="round"/>
<text x="150" y="105" text-anchor="middle" font-size="12">round</text>
<!-- square：方形端点 -->
<line x1="30" y1="130" x2="270" y2="130"
stroke="#ef4444" stroke-width="15" stroke-linecap="square"/>
<text x="150" y="155" text-anchor="middle" font-size="12">square</text>
</svg>虚线样式 (stroke-dasharray)
html
<svg width="300" height="180">
<!-- 等距虚线 -->
<line x1="10" y1="20" x2="290" y2="20"
stroke="#3b82f6" stroke-width="2" stroke-dasharray="10"/>
<text x="10" y="38" font-size="11">dasharray="10"</text>
<!-- 长短交替 -->
<line x1="10" y1="60" x2="290" y2="60"
stroke="#22c55e" stroke-width="2" stroke-dasharray="20,5"/>
<text x="10" y="78" font-size="11">dasharray="20,5"</text>
<!-- 点线 -->
<line x1="10" y1="100" x2="290" y2="100"
stroke="#ef4444" stroke-width="2" stroke-dasharray="2,4"/>
<text x="10" y="118" font-size="11">dasharray="2,4"</text>
<!-- 复杂模式 -->
<line x1="10" y1="140" x2="290" y2="140"
stroke="#8b5cf6" stroke-width="2" stroke-dasharray="15,5,5,5"/>
<text x="10" y="158" font-size="11">dasharray="15,5,5,5"</text>
</svg>线条透明度
html
<svg width="200" height="100">
<line x1="10" y1="20" x2="190" y2="20" stroke="#3b82f6" stroke-width="8" opacity="1"/>
<line x1="10" y1="40" x2="190" y2="40" stroke="#3b82f6" stroke-width="8" opacity="0.7"/>
<line x1="10" y1="60" x2="190" y2="60" stroke="#3b82f6" stroke-width="8" opacity="0.4"/>
<line x1="10" y1="80" x2="190" y2="80" stroke="#3b82f6" stroke-width="8" opacity="0.2"/>
</svg>使用 CSS 样式
html
<style>
.animated-line {
stroke: #3b82f6;
stroke-width: 3;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: draw 2s ease forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
<svg width="300" height="50">
<line class="animated-line" x1="10" y1="25" x2="290" y2="25"/>
</svg>线条动画
html
<svg width="300" height="100">
<!-- 移动的线条 -->
<line x1="10" y1="30" x2="100" y2="30" stroke="#3b82f6" stroke-width="3">
<animate attributeName="x2" values="100;290;100" dur="2s" repeatCount="indefinite"/>
</line>
<!-- 虚线动画 -->
<line x1="10" y1="70" x2="290" y2="70"
stroke="#22c55e" stroke-width="3" stroke-dasharray="20,10">
<animate attributeName="stroke-dashoffset" from="0" to="30" dur="0.5s" repeatCount="indefinite"/>
</line>
</svg>实际应用示例
十字线（准星）
html
<svg width="100" height="100">
<!-- 水平线 -->
<line x1="0" y1="50" x2="40" y2="50" stroke="#ef4444" stroke-width="2"/>
<line x1="60" y1="50" x2="100" y2="50" stroke="#ef4444" stroke-width="2"/>
<!-- 垂直线 -->
<line x1="50" y1="0" x2="50" y2="40" stroke="#ef4444" stroke-width="2"/>
<line x1="50" y1="60" x2="50" y2="100" stroke="#ef4444" stroke-width="2"/>
<!-- 中心圆 -->
<circle cx="50" cy="50" r="5" fill="none" stroke="#ef4444" stroke-width="2"/>
</svg>分隔线
html
<svg width="300" height="40">
<!-- 渐变分隔线效果 -->
<defs>
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#e5e7eb"/>
<stop offset="50%" style="stop-color:#9ca3af"/>
<stop offset="100%" style="stop-color:#e5e7eb"/>
</linearGradient>
</defs>
<line x1="10" y1="20" x2="290" y2="20" stroke="url(#lineGrad)" stroke-width="2"/>
</svg>坐标轴
html
<svg width="250" height="200">
<!-- Y轴 -->
<line x1="40" y1="20" x2="40" y2="180" stroke="#1f2937" stroke-width="2"/>
<!-- X轴 -->
<line x1="40" y1="180" x2="230" y2="180" stroke="#1f2937" stroke-width="2"/>
<!-- Y轴箭头 -->
<line x1="35" y1="30" x2="40" y2="20" stroke="#1f2937" stroke-width="2"/>
<line x1="45" y1="30" x2="40" y2="20" stroke="#1f2937" stroke-width="2"/>
<!-- X轴箭头 -->
<line x1="220" y1="175" x2="230" y2="180" stroke="#1f2937" stroke-width="2"/>
<line x1="220" y1="185" x2="230" y2="180" stroke="#1f2937" stroke-width="2"/>
<!-- 网格线 -->
<line x1="40" y1="100" x2="230" y2="100" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,3"/>
<line x1="130" y1="20" x2="130" y2="180" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,3"/>
</svg>关闭按钮（X）
html
<svg width="40" height="40">
<line x1="10" y1="10" x2="30" y2="30" stroke="#6b7280" stroke-width="3" stroke-linecap="round"/>
<line x1="30" y1="10" x2="10" y2="30" stroke="#6b7280" stroke-width="3" stroke-linecap="round"/>
</svg>菜单图标（汉堡菜单）
html
<svg width="40" height="40">
<line x1="8" y1="12" x2="32" y2="12" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
<line x1="8" y1="20" x2="32" y2="20" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
<line x1="8" y1="28" x2="32" y2="28" stroke="#1f2937" stroke-width="3" stroke-linecap="round"/>
</svg>下一步
学会了线条，接下来让我们学习 SVG 多边形 的绘制！