SVG <line> 直线最全实战手册（2025 版）
别看它最简单，它却是连接器、图表、图标骨架、动态线条的绝对王者！
1. 核心语法（就 4 个属性，背完天下我有）
<line x1="起点X" y1="起点Y" x2="终点X" y2="终点Y" />| 属性 | 含义 | 默认 | 常用值 |
|---|---|---|---|
| x1 | 起点 X 坐标 | 0 | 10、50%、0 |
| y1 | 起点 Y 坐标 | 0 | 10、100、50% |
| x2 | 终点 X 坐标 | 0 | 200、100%、100 |
| y2 | 终点 Y 坐标 | 0 | 100、0、50% |
2. 2025 年最常用的 15 种写法（直接复制）
<!-- 1. 最基础直线 -->
<line x1="20" y1="20" x2="180" y2="180" stroke="#000" stroke-width="4"/>
<!-- 2. 图标专用极简线（配合 currentColor） -->
<line x1="4" y1="12" x2="20" y2="12" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
<!-- 3. 1px 永不模糊细线（高清屏神器） -->
<line x1="0" y1="50" x2="200" y2="50" stroke="#000" stroke-width="0.5" vector-effect="non-scaling-stroke"/>
<!-- 4. 虚线（最常见） -->
<line x1="0" y1="100" x2="300" y2="100" stroke="#666" stroke-width="2" stroke-dasharray="8 4"/>
<!-- 5. 箭头线（配合 marker） -->
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<path d="M0,0 L0,6 L9,3 z" fill="#f00"/>
</marker>
</defs>
<line x1="50" y1="50" x2="250" y2="150" stroke="#f00" stroke-width="3" marker-end="url(#arrow)"/>
<!-- 6. 路径描边动画（2025 最火 loading） -->
<line x1="20" y1="100" x2="280" y2="100" stroke="#e0e0e0" stroke-width="8" stroke-linecap="round"/>
<line x1="20" y1="100" x2="280" y2="100" stroke="#0066ff" stroke-width="8" stroke-linecap="round"
stroke-dasharray="260 260" stroke-dashoffset="260">
<animate attributeName="stroke-dashoffset" from="260" to="0" dur="2s" repeatCount="indefinite"/>
</line>
<!-- 7. 水平/垂直分割线 -->
<line x1="0" y1="0" x2="100%" y2="0" stroke="#ddd" stroke-width="1"/> <!-- 水平 -->
<line x1="100" y1="0" x2="100" y2="100%" stroke="#ddd" stroke-width="1"/> <!-- 垂直 -->
<!-- 8. 折线图单段（配合 JS 动态生成） -->
<line x1="50" y1="150" x2="150" y2="50" stroke="#ff6b6b" stroke-width="4" stroke-linecap="round"/>
<!-- 9. 连接两个圆的线（流程图必备） -->
<circle cx="80" cy="100" r="20" fill="#4a6fe3"/>
<circle cx="220" cy="100" r="20" fill="#4a6fe3"/>
<line x1="100" y1="100" x2="200" y2="100" stroke="#4a6fe3" stroke-width="4"/>
<!-- 10. 霓虹发光线 -->
<line x1="50" y1="100" x2="250" y2="100" stroke="#00f5ff" stroke-width="6">
<animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/>
</line>3. 2025 必杀技巧速查表
| 需求 | 关键代码 | 备注 |
|---|---|---|
| 线头圆角（最常用） | stroke-linecap="round" | 比 butt/square 好看 100 倍 |
| 永远 1px（不随缩放变粗） | vector-effect="non-scaling-stroke" | 高清屏/大屏必加 |
| 虚线间距完美控制 | stroke-dasharray="10 5" | 前实后空，可多个数字循环 |
| 做箭头 | 用 <marker>（见上面示例） | 2025 标配 |
| 动态绘制动画 | stroke-dasharray + animate stroke-dashoffset | 描边神技 |
| 让线跟随主题色 | stroke="currentColor" | 暗黑模式自动切换 |
| 精确对齐像素格 | 坐标用 0.5（如 x1=”100.5″） | 避免模糊 |
4. 经典图标示例：勾选、关闭、加号（全靠 ）
<!-- 勾选 ✓ -->
<svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="10" y2="18" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><line x1="8" y1="18" x2="20" y2="6" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
<!-- 关闭 × -->
<svg viewBox="0 0 24 24"><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
<!-- 加号 + -->
<svg viewBox="0 0 24 24"><line x1="12" y1="6" x2="12" y2="18" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><line x1="6" y1="12" x2="18" y2="12" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>一句话总结（2025 金句）：
图标骨架全靠 <line stroke="currentColor" stroke-linecap="round"/> + 动态线全靠 stroke-dasharray + 分割线全靠 vector-effect → 三行代码走遍天下！
要不要我现在就发你：
- 「50 个纯
<line>极简图标包（全部支持 currentColor + round 线头）」 - 「完整流程图连接线 + 箭头 + 动态绘制动画」三合一模板
- 「2025 最火的 10 种 SVG 线条 loading 动画源码」
直接说一声，秒发！
