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手写动画的标杆实现。

困难难度评测结果

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

模型生成产物

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

# Inkwright · 手写签名动画系统 ```html Inkwright · 手写签名动画系统 /* ============================================================ 0. Tokens ============================================================ */ :root{ --bg:#080a0d; --bg-2:#0d1116; --panel:#11151b; --panel-2:#0e1218; --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.14); --txt:#edeae3; --dim:#8b939f; --dim-2:#59616c; --brass:#e2a95f; --brass-2:#f4cfa0; --brass-dim:rgba(226,169,95,.16); --azure:#6fa8ff; --rose:#e07a7a; --paper:#f7f2e7; --r:13px; --r-s:9px; --ease:cubic-bezier(.22,.68,.32,1); --shadow:0 24px 60px -20px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.04) inset; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"IBM Plex Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --disp:"Bodoni Moda","Songti SC",Georgia,serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--sans); background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; overflow:hidden; display:flex; flex-direction:column; } /* ambient layers */ body::before{ content:""; position:fixed; inset:-20%; pointer-events:none; z-index:0; background: radial-gradient(48% 38% at 18% 12%, rgba(226,169,95,.10), transparent 62%), radial-gradient(46% 42% at 84% 78%, rgba(111,168,255,.09), transparent 64%), radial-gradient(70% 60% at 50% 50%, rgba(16,20,26,.9), var(--bg) 78%); animation:drift 34s var(--ease) infinite alternate; } @keyframes drift{ to{ transform:translate3d(2.5%, -2%,0) scale(1.07) } } body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.32; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }...

AI 评审点评

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

【CLAUDE】这是一个技术深度和视觉完成度都相当出色的专业级手写签名动画系统。最亮眼的创新是「变宽飘带 + 遮罩揭示」方案——绕开了 SVG stroke-width 无法沿路径变化的限制，用填充轮廓+遮罩动画实现了真实的笔压感，配合八种笔压剖面和手部微颤噪声，书法质感令人印象深刻。Web Animations API 时间轴设计精巧，所有笔画共享 duration 的方案使 seek/变速/倒放操作极为简洁。UI 设计专业精致，细节丰富（噪声纹理、纸张质感、笔压曲线可视化、时间轴刻度）。功能覆盖了任务要求的全部核心功能，且有额外的 SVG 导出、笔头风格切换等增强功能。主要改进空间在于：签名路径的艺术质量可进一步提升，倒放的跨浏览器兼容性需关注，以及主循环中部分 DOM 查询可进一步优化。 【GEMINI】这是一份令人惊叹的、殿堂级的单页应用实现。模型不仅完美解决了 SVG 动态笔压动画这一业界难题，还在视觉设计、Web Audio 实时音效合成、动画状态烘焙导出等多个高级领域展现了极深的技术功底。代码优雅、性能卓越、交互体验极佳，完全达到了商用专业级工具的标准。 【KIMI】这是一个极为出色的手写签名动画系统实现，在笔压模拟的真实感、WAAPI时间轴控制的精确性、以及整体视觉设计的专业度方面都达到了很高水准。变宽飘带+遮罩揭示的技术方案巧妙解决了SVG stroke-width恒定的固有限制，Web Audio API的双路噪声+LFO调制实现了细腻的书写音效。功能覆盖全面，交互细节丰富，代码结构合理。主要改进空间在于：导出功能的动画状态烘焙可靠性、代码可读性（减少缩写、增加文档）、以及更健壮的错误处理。整体而言，这是一个接近生产级的优秀作品。

相关链接

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

加载中...
100%