svg 的 是指令序列解释器，行为完全由 d 属性驱动；常见不显示原因包括容器无尺寸、缺 stroke/fill、display: none、命名空间错误、未挂载 dom 或未触发 layout。
直接说结论：SVG 的 <path></path> 不是“画图工具”，而是“指令序列解释器”；它的行为完全由 d 属性里的命令字符串驱动，写错一个字母、漏一个空格、坐标没对齐，就可能不显示、错位、或渲染成意外形状。
为什么 <path d="M10 10 L30 30"></path> 有时根本看不到线
常见错误不是语法写错，而是 SVG 容器本身不可见或未设置视口。比如：
-
<svg></svg>没设width/height，浏览器按默认 300×150 渲染，但路径坐标超出范围（如M1000 1000）就看不见 -
<path></path>缺少stroke或fill——<path d="M0 0 L10 10"></path>默认既不描边也不填充，等于画了条“隐形线” -
display: none或visibility: hidden父元素导致整个<path></path>不参与布局，后续调用getTotalLength()会返回0 - 动态创建时用了
document.createElement("path")而非document.createElementNS("http://www.w3.org/2000/svg", "path")，结果生成的是 HTML 元素而非 SVG 元素，被忽略渲染
M 和 L 组合画折线时，为什么首尾不闭合
M 是移动到起点（不画线），L 是从当前点画直线到目标点；它们本身不带“自动闭合”逻辑。是否闭合，全看有没有加 Z 命令：
-
d="M10 10 L30 10 L30 40"→ 开放折线，终点在 (30,40)，不连回 (10,10) -
d="M10 10 L30 10 L30 40 Z"→ 闭合三角形，Z强制画一条直线回到最近的M起点 - 多个
M可共存：d="M10 10 L30 10 M50 10 L70 10"生成两条分离线段，中间无连接 - 大小写敏感：
m10 10 l20 0是相对坐标，等价于M10 10 L30 10；但m10 10 l20缺少 y 值，解析失败
解析 d 字符串时，A 命令的 large-arc 和 sweep 怎么选
A 命令要画椭圆弧，给定起点、终点、x/y 半径、旋转角后，数学上存在 4 种可能弧线；large-arc 和 sweep 就是用来唯一确定其中一条的开关：
-
large-arc = 0：选小于 180° 的那条弧；= 1：选大于等于 180° 的那条 -
sweep = 0：顺时针方向绘制；= 1：逆时针方向绘制 - 例如从 (0,0) 到 (200,0)，半径都是 100：
A100 100 0 0 0 200 0是下凹小弧，A100 100 0 1 1 200 0是上凸大弧 - 实际调试建议：先固定
large-arc=0，只调sweep看方向；再换large-arc=1对比弧度大小
用 JS 动态更新 <path></path> 的 d 后，getTotalLength() 还准不准
准，但必须满足两个前提：
-
<path></path>已插入 DOM 树（不能是 document fragment 里未挂载的节点） - 元素已触发 layout —— 最稳妥是在
requestAnimationFrame里调用，或确保父<svg></svg>有明确尺寸且未被隐藏 - 修改
d后必须重新调用getTotalLength()，它不会监听属性变更 - 如果路径含
C/Q/A等曲线命令，返回值是数值逼近结果（如58.234），不是解析公式得出的精确值
真正容易被忽略的是：当 <path></path> 在 transform 下缩放时，getTotalLength() 返回的是用户坐标系下的长度，不受 transform 影响；若需屏幕像素长度，得手动乘上缩放系数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
