仅支持两点连线，必须指定x1、y1、x2、y2；用points属性绘多段线，值须成对；二者均不支持css单位，fill对line无效，polyline需fill="none"防遮挡。
<line></line> 画单段，<polyline></polyline> 画多段——别混用，也别指望 <line></line> 支持多个点。
line 必须填满 x1 y1 x2 y2 四个属性
漏掉任意一个，线条就消失，浏览器不会报错，只会静默忽略。比如写成 <line x1="10" y1="20" x2="100"></line>（缺 y2），结果是空白。
常见错误现象：
- 坐标值写了单位（如
x1="10px"）→ 浏览器不识别，当无效值处理 - 用了负数或小数（如
y1="-5.5"）→ 完全合法，SVG 坐标系原点在左上角，y 向下为正 - 设了
fill属性 → 对<line></line>没效果，它只响应stroke和stroke-width
polyline 的 points 必须成对，空格/逗号都行但不能混乱
points 是唯一必需属性，格式必须是偶数个数值，两两组成 (x,y)。例如 "10,20 30,40 50,60" 或 "10,20,30,40,50,60" 都可以，但 "10,20,30"（奇数个）会丢弃最后一个 30，只画出 (10,20) 到 (30,?) 这一段——实际就是无效点被跳过，后续仍继续解析。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
使用场景：
- 绘制坐标轴刻度线：用
<line></line>更轻量，不用拼 points 字符串 - 图表连线、矢量图标骨架、路径轮廓：优先用
<polyline></polyline>，语义清晰且 DOM 节点更少 - 需要首尾闭合 → 别硬凑
<polyline></polyline>，直接换<polygon></polygon>，它复用相同points语法但自动闭合
stroke 和 fill 的行为差异容易踩坑
<line></line> 完全无视 fill，哪怕写 fill="red" 也没颜色；而 <polyline></polyline> 默认有黑色填充（不是透明），所以常见写法必须加 fill="none"，否则可能意外遮挡背景或其他元素。
性能影响：
- 大量单条
<line></line>（比如 1000 条）比等效的单个<polyline></polyline>多约 2–3 倍 DOM 节点，渲染开销略高 -
<polyline></polyline>的points字符串过长（如万级坐标）可能导致解析延迟，此时应考虑用<:path d="M...L..."> - 所有坐标默认按像素解析，不支持 CSS 单位（
em、rem）或百分比（除非配合viewBox缩放）
真正难的不是写对标签，而是坐标数据从哪来、怎么保证 points 里没漏点、以及要不要做坐标系偏移（比如把数学坐标 y 向上为正转成 SVG 的 y 向下为正）。这些不在标签语法里，但决定你画得准不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
