OpenAI: GPT-5 Nano 在「SVG 路径手写签名动画」的评测结果

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

基本信息

  • 模型名称：OpenAI: GPT-5 Nano
  • 用例名称：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. 动画流畅，无明显卡顿

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

SVG 手写文字动画 - Hello /* 基础样式 */ :root { --stroke: #1f2937; --bg: #ffffff; } html, body { height: 100%; margin: 0; background: linear-gradient(#ffffff, #f7f7f7); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "PingFang SC"; color: #333; } /* 页面布局 */ .wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px; box-sizing: border-box; } .card { background: #fff; border-radius: 14px; padding: 22px; width: min(100%, 860px); box-shadow: 0 8px 28px rgba(0,0,0,.08); text-align: center; } .svgBox { width: 100%; height: auto; max-width: 820px; margin: 0 auto 12px; } svg { width: 100%; height: auto; display: block; } /* 字迹风格：笔画样式 */ path { fill: none; stroke: var(--stroke); stroke-width: 4.5; /* 笔画粗细，可调 */ stroke-linecap: round; stroke-linejoin: round; } /* 控制区域样式 */ .controls { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: 8px; } button { background: #1f2937; color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-size: 14px; cursor: pointer; transition: transform .2s ease, background .2s ease; } button:hover { transform: translateY(-1px); background: #374151; } 重播 // 实现思路： // - 为每一个路径设置一个整条路径的长度 len 作为 dash 的总长度 // - 初始时 strokeDasharray 与 strokeDashoffset 都设为 len，隐藏笔画 // - 通过 transition 把 strokeDashoffset 动画到 0，形成“描绘”效果 // - 通过为每条路径设置不同的 transitionDelay 实现逐笔顺序动画 // - 点击“重播”重新触发动画 document.addEventListener('DOMContentLoaded', function () { const svg = document.getElementById('signature'); const paths = Array.from(svg.querySelectorAll('path')); // 初始化：为每条笔画设置长度相关的 dash 尺度 paths.forEach((p, idx) => { const len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len; // 设置逐条的延迟与固定的过渡时间 p.style.transition = 'stroke-dashoffset 1.6s ease'; p.style.transitionDelay = `${idx * 0.18}s`; }); // 小定时让初始动画“自动播放” requestAnimationFrame(() => { paths.forEach(p => { p.style.strokeDashoffset = '0'; }); }); // 重播按钮逻辑 const replayBtn =...

AI 评审点评

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

【CLAUDE】该实现掌握了 stroke-dasharray/stroke-dashoffset 手写动画的核心技术原理，代码结构清晰，注释详尽，交互逻辑基本完整。主要不足在于 SVG 路径设计质量较低：字母「e」路径不正确、两个「l」几乎重叠、整体字形可辨识度差，未能达到「书法感手写还原」的视觉效果要求。自动播放的触发机制也存在潜在可靠性问题。如果路径设计更精良（使用真实的手写字体路径数据），整体效果会有显著提升。 【GEMINI】该模型出色地完成了任务要求。代码结构规范，不仅实现了核心的 SVG 描边动画技术，还通过合理的 CSS 布局和 JavaScript 逻辑优化了用户体验。代码可读性高，功能实现完全符合预期，是一个高质量的前端开发示例。 【KIMI】该实现完整满足了所有功能要求，技术实现正确规范。stroke-dasharray/stroke-dashoffset 动画原理应用得当，自动播放和重播功能工作正常。代码质量高，注释清晰，结构合理。视觉呈现简洁大方，虽手写风格还有提升空间，但作为基础难度测试已完全达标。是一个优秀的 SVG 手写动画实现案例。

进阶难度评测结果

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

模型生成产物

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

多笔画手写签名动画（SVG+CSS） :root { --bg-start: #0f1020; --bg-end: #1a1f2a; --card: rgba(255,255,255,0.08); --card-border: rgba(255,255,255,0.18); --accent: #1e4a8a; --text: #e9eefc; --shadow: 0 20px 40px rgba(0,0,0,0.25); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: var(--text); background: linear-gradient(135deg, var(--bg-start), var(--bg-end)); overflow-x: hidden; } .wrapper { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .card { width: min(980px, 92vw); background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); border: 1px solid var(--card-border); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); backdrop-filter: blur(6px); } .title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding: 4px 6px; } h1 { font-size: 20px; font-weight: 600; margin: 0; } .subtitle { font-size: 12.5px; opacity: 0.8; } .svg-container { background: #0b1120; border-radius: 14px; padding: 14px; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; } svg { width: 100%; height: 260px; display: block; } /* Animation for the strokes */ @keyframes draw { to { stroke-dashoffset: 0; } } /* Underline (decorative) animation - starts after the signature finishes */ @keyframes underlineDraw { to { stroke-dashoffset: 0; opacity: 1; } } /* Controls panel */ .panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.15); } .btn { appearance: none; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; padding: 10px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; transition: transform 0.2s ease,...

AI 评审点评

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

【CLAUDE】该实现在技术框架上正确运用了 SVG stroke-dasharray/stroke-dashoffset 动画技术，具备基本的多笔画顺序播放和速度比例控制逻辑，页面视觉设计较为现代美观。但存在几个关键缺陷：交互状态管理逻辑混乱（特别是动画完成后重播和速度切换时的状态重置），签名路径的书法艺术感不足，以及部分动画细节（如下划线淡入）实现不够精细。整体属于功能基本可用但有明显改进空间的中等水平实现。 【GEMINI】该模型出色地完成了任务要求，代码结构清晰，逻辑严密。不仅完美实现了 SVG 动画的核心技术需求，还在 UI 设计和交互体验上表现出极高的水准，是一个高质量的前端工程实现。 【KIMI】该实现完整覆盖了功能需求，技术方案选择恰当（SVG + CSS 动画），代码结构清晰且包含良好的注释。动画时序控制准确，速度与笔画长度成比例的设计体现了对真实书写节奏的考量。视觉设计具有现代感，界面美观。主要改进空间在于：速度切换时的动画连续性、增加重置功能，以及提升签名的书法艺术感（如引入可变线条粗细模拟真实笔触压力）。整体而言，这是一个质量较高的实现。

困难难度评测结果

  • 得分：0.8 分
  • 通过状态：未通过

模型生成产物

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

系统报错（阶段=模型生成; 模块=app.services.inference.call_text_model; provider=openrouter; model=openai/gpt-5-nano）：[app.services.inference.call_text_model][provider=openrouter][model=openai/gpt-5-nano] 流式调用超时: 超过 120.0s 没有收到新数据

AI 评审点评

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

【CLAUDE】本次评测中，模型因推理调用超时（超过120秒未收到新数据）未能生成任何有效输出。候选输出仅为一条系统错误信息，所有评分维度均为0分。该任务要求实现复杂的SVG手写动画系统，涉及多项高级Web技术（Web Animations API、Web Audio API、SVG动画等），对模型的代码生成能力要求较高，本次未能完成任务。 【GEMINI】由于模型在生成过程中发生流式调用超时，未能输出任何代码内容。根据评测要求，该次生成被视为无效，所有维度得分为 0 分。 【KIMI】该候选输出为系统错误信息而非有效代码，模型在生成过程中发生流式调用超时（120秒无响应），导致完全未产出符合任务要求的 SVG 手写签名动画系统。所有评分维度均无法达标，属于彻底的生成失败案例。

相关链接

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

加载中...
100%