SVG答题卡对勾“逐笔书写”特效需将对勾拆为单路径（如M6,10 L12,16 L18,4），用stroke-dasharray与stroke-dashoffset配合动画实现描边效果，答对时触发、适配移动端清晰显示。
在 H5 页面中用 SVG 实现答题卡对勾（✓）的“逐笔书写”特效，核心是将对勾拆解为可顺序描边的路径，再通过 stroke-dasharray 与 stroke-dashoffset 配合 CSS 动画或 JS 控制实现“一笔一划”绘制效果。关键不在于画多像，而在于路径结构合理、动画节奏自然、适配移动端触控反馈。
一、把对勾转成单路径且符合书写逻辑
手写对勾通常分两笔：先向右下斜撇，再向左上回钩。SVG 中应合并为一条 <path>，起点在左上，终点在右上，并确保路径方向与真实运笔一致（避免反向描边）。
推荐路径写法（24px 答题卡常用尺寸）：
<path d="M6,10 L12,16 L18,4" fill="none" stroke="#4CAF50" stroke-width="2"/>
说明：这是典型两段式折线路径，从 (6,10) → (12,16) → (18,4)，视觉上就是干净利落的手写对勾。不要用 <polyline> 或多条 <line>，否则无法用单个 stroke-dasharray 统一控制。
二、用 stroke-dasharray 模拟“画线过程”
原理：把整条路径的总长度设为 stroke-dasharray 的值（如 30,30），再用 stroke-dashoffset 从最大值逐步减到 0，就能实现“从无到有”的描边动画。
操作步骤：
- 用 JS 获取路径长度：
const len = path.getTotalLength(); - 设置 CSS：
path { stroke-dasharray: [len] [len]; stroke-dashoffset: [len]; transition: stroke-dashoffset .4s ease-out; } - 触发时修改 offset：
path.style.strokeDashoffset = 0;
注意：动画时间建议 0.3–0.5 秒，过快显得机械，过慢影响答题反馈节奏；ease-out 让收尾稍缓，更像真实停笔。
三、结合答题交互，只在答对时播放
别让对勾自动动——它必须是用户点击/选择后的明确反馈。常见做法：
- 初始状态：对勾
opacity: 0或display: none - 判题后（如 JS 判断答案正确）：
path.parentElement.style.opacity = 1;，再延迟几毫秒（setTimeout）触发描边（避免渲染冲突） - 可加音效或轻微缩放（
transform: scale(1.1) → scale(1)）增强确认感
示例片段：
if (isCorrect) {
checkGroup.style.opacity = 1;
setTimeout(() => {
checkPath.style.strokeDashoffset = 0;
}, 10);
}
四、适配不同屏幕和清晰度
H5 答题卡常需适配 iOS/Android 多种分辨率，SVG 要保证清晰不模糊：
- SVG 根元素设
viewBox="0 0 24 24"，宽高用百分比或 rem（如width: 1.5rem; height: 1.5rem;） - 避免固定
px值写死stroke-width，改用stroke-width="2"+vector-effect="non-scaling-stroke"（防缩放变细） - 真机测试重点看 iOS Safari —— 它对
getTotalLength()和 dash 动画支持稳定，但早期版本不支持vector-effect，可加降级（媒体查询检测后 fallback）
不复杂但容易忽略。
