qwen3.8-flash 在「SVG 路径手写签名动画」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：qwen3.8-flash
  • 用例名称：SVG 路径手写签名动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端开发工程师，擅长 SVG 动画技术。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

使用 SVG 实现一个手写文字动画效果。 功能要求： 1. 在页面中展示一个 SVG 文字或签名路径（可以是英文单词，如「Hello」） 2. 利用 SVG 的 stroke-dasharray 和 stroke-dashoffset 属性，实现文字被逐笔描绘出来的动画效果 3. 页面加载后自动播放动画 4. 提供一个「重播」按钮，点击后可以重新播放动画

任务要求

AI 模型需要满足以下要求：

  1. 页面包含 SVG 路径文字或签名，视觉上清晰可辨
  2. 使用 stroke-dasharray 和 stroke-dashoffset 实现描边动画
  3. 页面加载后自动播放手写动画
  4. 提供「重播」按钮且功能正常
  5. 动画流畅，无明显卡顿

评测结果

综合得分

该模型在此用例的得分为：91.3 分（满分 100 分），已通过

基础难度评测结果

  • 得分：91.3 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

下面是一个完整的单页 HTML 应用，使用 SVG 路径 + `stroke-dasharray` / `stroke-dashoffset` 实现「Hello」手写逐笔动画，并支持自动播放和重播。 ```html SVG 手写文字动画 /* ========================= 页面基础样式 ========================= */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: radial-gradient(circle at top, #eef2ff, #f8fafc); color: #111827; } .card { width: min(920px, 92vw); background: rgba(255, 255, 255, 0.92); border: 1px solid #e5e7eb; border-radius: 24px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); padding: 28px; } h1 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); } .desc { margin: 0 0 20px; color: #4b5563; } .stage { background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px dashed #cbd5e1; border-radius: 18px; padding: 24px 16px; } svg { display: block; width: 100%; height: auto; } /* ========================= SVG 笔画样式 ========================= */ .ink { fill: none; stroke: url(#inkGradient); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; /* 初始状态： 用虚线把整条路径隐藏。 JS 会根据 getTotalLength() 重新设置更精确的值。 */ stroke-dasharray: 1000; stroke-dashoffset: 1000; will-change: stroke-dashoffset; } /* ========================= 控制区样式 ========================= */ .controls { display: flex; align-items: center; gap: 14px; margin-top: 20px; } button { border: 0; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-size: 16px; padding: 11px 22px; border-radius: 12px; cursor: pointer; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25); transition: transform 0.15s, opacity 0.15s; } button:hover:not(:disabled) { transform: translateY(-1px); } button:active:not(:disabled) { transform: translateY(1px); } button:disabled { opacity: 0.55; cursor: not-allowed; } .status { color: #4b5563; font-size: 14px; } SVG 手写文字动画 使用 stroke-dasharray 和 stroke-dashoffset 实现「Hello」逐笔描绘效果。 重播 准备中… /* 核心原理： 1. 每条 path 都有总长度 length。 2. stroke-dasharray 设置为 length...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现在技术层面较为扎实，正确运用了 stroke-dasharray/stroke-dashoffset 核心技术，并配合 requestAnimationFrame、缓动函数、路径长度测量等手段实现了流畅的逐笔书写动画。交互功能完整，自动播放和重播均正常工作。主要不足在于 SVG 路径对「Hello」字母的还原度有限，字母形状较为简化，视觉可辨识度一般，但整体页面设计风格统一，具有一定的美观性。代码结构清晰，注释详细，工程质量较高。 【GEMINI】这是一份极高质量的交付代码。不仅完美实现了 SVG 逐笔手写动画的核心技术要求，还在动画平滑度（缓动函数）、多笔画时序控制（Timeline 机制）、交互细节（按钮禁用态与状态提示）以及视觉美化（渐变色与现代 UI 布局）上做到了极致。代码结构清晰，注释详尽，是一份无可挑剔的优秀示范。 【KIMI】该实现是一份高质量的 SVG 手写动画代码，技术实现扎实，完整覆盖了所有功能需求。动画核心原理运用娴熟，交互考虑周到（包括无障碍支持），视觉设计简洁现代。SVG 路径的手写感有提升空间，但作为基础难度的测试任务，已远超及格标准。

进阶难度评测结果

  • 得分：94.4 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

# 墨迹 · 多笔画手写签名动画工作台 ```html SIGNA · 墨迹笔画实验室 /* ============ 设计令牌 ============ */ :root{ --bg:#0A0D12; --desk:#12171F; --paper:#F7F2E7; --txt:#E9E5DB; --dim:#7E8593; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --brass:#D9AC4E; --brass-2:#F0CE84; --seal:#B23A2E; --ink:#1C2A46; --ease:cubic-bezier(.42,.06,.35,1); --display:'Cormorant Garamond','Noto Serif SC',Georgia,serif; --body:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background: radial-gradient(115% 75% at 8% -12%, rgba(245,225,180,.10), transparent 58%), radial-gradient(85% 65% at 102% 108%, rgba(52,86,140,.20), transparent 62%), linear-gradient(163deg,#0E121A 0%,#151B25 42%,#0A0D12 100%); background-attachment:fixed; color:var(--txt); font-family:var(--body); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ============ 环境层 ============ */ .lamp{ position:fixed; top:-30vh; left:-10vw; width:70vw; height:80vh; background:radial-gradient(closest-side, rgba(255,232,190,.13), rgba(255,232,190,.04) 55%, transparent 75%); filter:blur(10px); pointer-events:none; z-index:0; animation:breathe 17s ease-in-out infinite; transform:translate3d(calc(var(--mx,0)*26px), calc(var(--my,0)*18px),0); } @keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}} .hair{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:96px 100%; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 65%); mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 65%); } .grain{ position:fixed; inset:0; z-index:99; pointer-events:none; opacity:.30; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180'...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个技术实现与视觉设计均达到高水准的SVG手写动画作品。完整实现了所有功能要求，并在此基础上大幅扩展：7条笔画路径、金属笔尖实时跟随、单笔重演、键盘快捷键、时间轴可视化、印章落章动画等。核心的stroke-dasharray/stroke-dashoffset技术运用正确，时长与路径长度成比例的设计体现了对书写节奏的深刻理解。视觉呈现达到专业设计级别，细节处理（纸张质感、飞白效果、光影跟随）令人印象深刻。代码结构清晰，注释充分，整体质量优秀。 【GEMINI】这是一个现象级的优秀作品。模型不仅以极高的技术规格完成了所有基础功能要求（利用 stroke-dash 技术、动态计算比例速度、时序控制、下划线淡入及控制面板），更在视觉动效和交互细节上进行了令人惊叹的超纲发挥。钢笔尖的实时物理跟随与旋转、墨迹边缘的粗糙滤镜、落笔洇墨、印章落章以及极其丰富的控制台交互，共同营造出了极致真实的艺术书写感，堪称 SVG 动画实现的典范。 【KIMI】这是一个超出预期的优秀实现，展现了极高的前端工程能力与艺术设计素养。技术层面，对SVG stroke动画原理的理解深入且运用纯熟，CSS变量注入、实时计算笔尖位置、独立缓动曲线等手法体现了扎实的功底；交互层面，功能完备且考虑周到，快捷键、时间轴、单独重演等增强功能提升了专业感；视觉层面，拟物风格与现代UI的融合恰到好处，细节丰富而不杂乱，完整营造了'墨迹笔画实验室'的沉浸氛围。整体完成度接近商业级作品，可作为SVG手写动画的标杆实现。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%