SVG文本描边追踪动画在iOS设备渲染不一致问题咨询

• 首先iOS端所有浏览器都强制使用WebKit内核，该内核针对SVG 文本元素的路径总长度计算规则与Chromium、Gecko内核存在标准实现差异，是导致描边动画表现不一致的核心原因。
• 你当前代码存在属性书写错误：SVG标准中viewBox为驼峰命名，你写为全小写viewbox，iOS WebKit对SVG属性大小写敏感度远高于其他浏览器，错误的属性命名会导致视口参数识别异常，连带描边长度计算出错。
• iOS WebKit对带小数的stroke-dasharray、stroke-dashoffset属性值会自动做截断处理，和其他平台的小数渲染逻辑不同，也会导致动画偏差。

1. 修正基础属性错误：将代码里的viewbox修改为驼峰格式viewBox，可优先排除属性识别异常问题。
2. 优先使用转曲的路径做描边动画：不要直接用标签实现描边动效，导出SVG时将文本转曲为元素，所有平台的路径长度计算基准会完全统一，从根源避免文本渲染带来的兼容问题。
3. 所有描边相关属性值统一用整数：如果是用JS动态计算路径长度，赋值前先做取整处理：

const path = document.querySelector('.stroke-path')
// 强制向下取整，避免小数带来的计算差异
const pathLength = Math.floor(path.getTotalLength())
path.style.strokeDasharray = `${pathLength} ${pathLength}`
path.style.strokeDashoffset = pathLength

如果是纯CSS写死的属性值，也直接使用整数值即可。
4. 若必须保留标签实现动效，给文本元素添加CSS属性vector-effect: non-scaling-stroke，强制iOS端统一描边缩放计算逻辑，减少视口适配带来的计算偏差。
5. 关键帧动画中避免用百分比设置stroke-dashoffset，优先使用和路径长度匹配的固定整数值，iOS对该属性的百分比换算逻辑与其他平台存在差异。

内容的提问来源于stack exchange，提问作者TheGoldenD0nut