stroke-dashoffset对普通HTML文字无效，因该属性仅作用于SVG路径；必须用SVG <text> 元素，结合 getTotalLength() 获取真实轮廓长度，并通过CSS变量与calc()绑定偏移量才能实现可动画的描边效果。
不能直接用 stroke-dashoffset: var(--offset) 驱动文字描边动画——因为 HTML 的 <span> 或 <p> 标签不支持该属性，必须用 SVG <text> 元素，且需先获取真实路径长度。
为什么 stroke-dashoffset 对普通文字无效
这个属性只作用于 SVG 渲染管线中的描边路径，HTML 文本节点没有“描边路径”概念。即使你给 <div> 加了 text-stroke（非标准 CSS），它也不参与 stroke-dasharray/stroke-dashoffset 的虚线逻辑。真正能动的只有 SVG 里的 <text>，而且它必须被浏览器当作一条可测量的路径来处理。
常见错误现象：
-
<text>没设stroke，只设了fill→ 动画无视觉变化 - 写了
stroke-dasharray: 100但没调用getTotalLength()→ 实际文字轮廓长可能是 237.4，硬写 100 导致动画中途截断或跳变 - CSS 变量初始值为空或
undefined→calc(var(--offset) * 1px)算出NaN，浏览器静默丢弃样式
如何让 SVG <text> 支持变量驱动描边动画
核心是把文字转成可测量路径，并用 JS 注入长度、CSS 变量绑定偏移。步骤不能跳：
立即学习“前端免费学习笔记（深入）”；
- 用
<svg><text>包裹文字，确保font-family、font-size、letter-spacing已固定（动态字体导致getTotalLength()不稳定） - 首次渲染后立即执行：
const len = textEl.getTotalLength();，再设textEl.style.strokeDasharray = len;和textEl.style.strokeDashoffset = len; - 定义 CSS 变量：
:root { --text-offset: 0; }，并在<text>上写：stroke-dashoffset: calc(var(--text-offset) * 1px); transition: stroke-dashoffset 0.5s ease; - JS 更新动画只需：
document.documentElement.style.setProperty('--text-offset', len);（从隐藏到显示）或0（反向擦除）
注意：getTotalLength() 在文字含 emoji、连字（ligature）或 font-feature-settings 时可能返回 0，此时需降级为预设估算值或改用 <path d="..."> 手动描边。
Chrome 110+ 之前浏览器的兼容 fallback
旧版 Chrome/Firefox 不响应 --text-offset 变更触发重绘，transition: --text-offset 会完全失效。必须降级为直接操作 DOM 属性：
- 删掉所有
var(--text-offset)和transition: --text-offset - 改用 JS 直接设：
textEl.style.strokeDashoffset = targetOffset + 'px'; - 配合
requestAnimationFrame手动补帧，避免卡顿 - 若需同时支持新旧版本，可用
CSS.supports('transition', '--text-offset')做检测分支
别指望 @keyframes 里写 stroke-dashoffset: var(--text-offset) —— 它只在动画编译时取一次值，后续变量变，动画不动。
容易被忽略的初始化和响应式陷阱
文字描边动画最常在以下场景突然失效：
- SVG 容器用
width: 100%或viewBox缩放后，getTotalLength()返回的是原始坐标系长度，但 CSS 中的1px单位已随缩放变化 → 必须监听resize并重新获取长度、重设变量 -
<text>使用dominant-baseline或alignment-baseline导致基线偏移，视觉上“动画起点”错位 → 统一设dominant-baseline: hanging再测长度 - 文字内容动态更新（如 React state 变化）后，未重新调用
getTotalLength()→ 新文字长度不同，旧变量值直接错配 - 没设
text-rendering: geometricPrecision，浏览器为渲染性能简化轮廓，导致getTotalLength()与实际动画节奏不一致
真正的难点不在写动画，而在于每次 DOM 变化、尺寸变化、内容变化后，是否同步更新了长度和变量——漏掉任意一次，动画就“看起来卡住”或“跑偏”。
