qwen3.5-27b 在「SVG 动态手绘风格柱状图」的评测结果

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

基本信息

  • 模型名称：qwen3.5-27b
  • 用例名称：SVG 动态手绘风格柱状图
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

创建一个手绘风格的 SVG 柱状图。 功能要求： 1. 使用 SVG 绘制一组柱状图（至少 5 根柱子），展示一组静态数据 2. 为柱子应用 feTurbulence 滤镜，使柱子边缘呈现手绘不规则感 3. 页面加载时，柱子从底部向上生长，带有简单的上升动画 4. 包含 X 轴标签和 Y 轴刻度 5. 整体视觉风格接近手绘草图感

任务要求

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

  1. SVG 柱状图正确渲染，包含至少 5 根柱子
  2. feTurbulence 滤镜生效，柱子边缘呈现手绘不规则感
  3. 页面加载时柱子有从底部向上生长的动画
  4. 包含 X 轴标签和 Y 轴刻度
  5. 整体视觉具有草图/手绘风格

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个完整的单页 HTML 应用，包含了手绘风格的 SVG 柱状图。 ### 核心设计思路： 1. **滤镜魔法 (``)：** 使用了 `feTurbulence` 生成噪波纹理，配合 `feDisplacementMap` 对图形边缘进行位移，从而打破完美的几何直线，制造出铅笔或马克笔画出的粗糙边缘。 2. **视觉风格：** 选用了暖黄色的纸张背景色，搭配深色墨迹般的描边，并引入了 Google Fonts 的手写体 ('Indie Flower') 来统一整体气质。 3. **动画策略：** 利用 CSS 的 `transform: scaleY()` 配合 `transition`，实现了柱子从底部生长的流畅动画。 ```html 手绘风格 SVG 柱状图 :root { --bg-color: #fdf6e3; /* 米黄色纸张背景 */ --ink-color: #2c3e50; /* 墨水色 */ --accent-color: #e74c3c; /* 强调色 */ --bar-color: #f1c40f; /* 柱子填充色 */ } body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--bg-color); font-family: 'Indie Flower', cursive; /* 全局应用手写字体 */ } .chart-container { width: 90%; max-width: 800px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; position: relative; } /* 模拟纸张纹理的轻微噪点 */ .paper-texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; z-index: -1; filter: url(#noise-filter); } svg { display: block; width: 100%; height: auto; } /* 文本样式 */ text { font-family: 'Indie Flower', cursive; fill: var(--ink-color); font-size: 16px; user-select: none; } .axis-label { font-weight: bold; font-size: 18px; } /* 柱子动画定义 */ .sketch-bar { fill: var(--bar-color); stroke: var(--ink-color); stroke-width: 2px; transform-origin: bottom; /* 动画从底部开始 */ transform: scaleY(0); /* 初始高度为 0 */ transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画效果 */ } /* 激活动画的类 */ .sketch-bar.animate { transform: scaleY(1); } /* 坐标轴线 */ .axis-line { stroke: var(--ink-color); stroke-width: 2px; stroke-linecap: round; } /* 悬停效果 */ .sketch-bar:hover { fill: #ffeb3b; cursor: pointer; } // 1. 数据配置 const data = [ { label: "周一", value: 45 }, { label: "周二", value: 72 }, { label: "周三", value: 38 }, { label: "周四", value: 85 }, { label: "周五", value: 56 } ]; // 2. 画布配置 const config = { width: 800, height: 500, margin: { top: 40, right: 40, bottom: 60, left: 60 }, barGap: 20, //...

AI 评审点评

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

【CLAUDE】该实现整体质量较好，核心功能均已实现：feTurbulence 滤镜正确应用于柱子边缘制造手绘感，视觉风格统一（手写字体、纸张背景、墨水色），动画思路正确。主要风险点在于 SVG 元素的 CSS transform-origin 兼容性问题可能导致动画效果不符合预期（不从底部生长），这是一个实际运行中较明显的缺陷。整体代码结构清晰，注释充分，是一个完成度较高的手绘风格柱状图实现。 【GEMINI】模型高质量地完成了任务要求，不仅准确运用了 SVG 高级滤镜特性，还通过 CSS 和 JS 的配合实现了优秀的动态效果。代码结构清晰，注释详尽，视觉风格统一，是一个非常出色的前端实现案例。 【KIMI】该实现是一份高质量的 SVG 手绘风格柱状图代码。核心亮点在于 feTurbulence 滤镜的恰当运用，成功营造出自然的手绘边缘效果，而非简单的几何图形。动画设计流畅且富有节奏感，视觉风格统一完整。代码结构良好，注释清晰，完全满足题目所有要求，展现了扎实的 SVG 高级特性综合运用能力。

进阶难度评测结果

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

模型生成产物

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

这是一个完整的单页 HTML 应用，集成了 CSS、JavaScript 和 SVG 高级特性。它实现了你要求的所有功能，包括手绘风格的滤镜、交互动画以及响应式的 UI 设计。 ```html 手绘风格交互式柱状图 :root { --bg-color: #f9f7f1; /* 纸张米色 */ --ink-color: #2c3e50; /* 墨水深蓝 */ --accent-color: #e67e22; /* 强调色 */ --grid-color: #bdc3c7; --font-family: 'Indie Flower', cursive; } body { margin: 0; padding: 40px; background-color: var(--bg-color); font-family: var(--font-family); color: var(--ink-color); display: flex; flex-direction: column; align-items: center; min-height: 100vh; } h1 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); } p.subtitle { font-size: 1.2rem; color: #7f8c8d; margin-bottom: 30px; } /* 图表容器 */ .chart-container { position: relative; width: 800px; max-width: 95%; height: 500px; box-shadow: 10px 10px 20px rgba(0,0,0,0.1); background: white; border-radius: 4px; padding: 20px; /* 给容器本身也加一点点手绘边框感 */ border: 2px solid var(--ink-color); outline: 2px dashed var(--ink-color); outline-offset: -10px; } svg { width: 100%; height: 100%; overflow: visible; } /* 文字样式 */ .axis-label { font-size: 14px; fill: var(--ink-color); font-weight: bold; } .data-label { font-size: 12px; fill: var(--ink-color); opacity: 0.7; } /* 柱子样式 */ .bar { fill: #3498db; stroke: var(--ink-color); stroke-width: 2; cursor: pointer; transition: fill 0.3s ease, transform 0.1s linear; /* 默认轻微浮动 */ animation: float-idle 3s ease-in-out infinite alternate; } .bar:hover { fill: #2980b9; z-index: 10; /* 悬停时抖动加剧 */ animation: shake-hover 0.4s ease-in-out infinite; } /* 动画定义 */ @keyframes float-idle { 0% { transform: translateY(0px); } 100% { transform: translateY(-2px); } } @keyframes shake-hover { 0% { transform: translate(1px, 1px) rotate(0deg); } 25% { transform: translate(-1px, -2px) rotate(-1deg); } 50% { transform: translate(-3px, 0px) rotate(1deg); } 75% { transform: translate(3px, 2px) rotate(0deg); } 100% { transform: translate(1px, -1px) rotate(0deg); } } /* Tooltip 样式 */ #tooltip { position: absolute; background: var(--ink-color); color: white;...

AI 评审点评

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

【CLAUDE】该实现在设计思路和代码结构上展现了一定的专业性，正确地声明并引用了 feTurbulence 滤镜，整体视觉风格设计统一，手绘感方向正确。然而存在一个根本性的技术错误：使用 CSS style.height 和 style.y 来驱动 SVG rect 元素的几何属性动画，这在大多数浏览器中不会生效（SVG 几何属性需通过 setAttribute 或 SMIL/CSS presentation attributes 来动画化）。这导致整个核心功能——柱子上升动画——实际上无法运行，进而影响了动态抖动效果、重播功能等所有依赖动画的功能。tooltip 交互设计相对完整但也可能因为柱子不可见而难以触发。建议使用 SMIL animate 元素、CSS clip-path、或通过 requestAnimationFrame + setAttribute 来实现 SVG 高度动画。 【KIMI】该实现整体质量较高，成功构建了统一的手绘风格视觉体系，feTurbulence 滤镜的应用符合题目要求。主要不足在于上升动画过程中的抖动效果实现不完整（CSS 类名未定义），且抖动效果未与 SVG 滤镜深度结合，而是完全依赖 CSS 动画。建议在 rising-shake 类中补充关键帧动画，或探索通过 JavaScript 动态调整 feTurbulence 的 seed 属性来实现更原生、更具特色的 SVG 抖动效果。

困难难度评测结果

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

模型生成产物

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

```html Artisanal Data Viz: Hand-Drawn Analytics :root { --bg-color: #f4f1ea; --ink-color: #2c3e50; --accent-color: #e74c3e; --grid-color: #bdc3c7; --ui-bg: rgba(255, 255, 255, 0.9); } body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--ink-color); overflow: hidden; display: flex; flex-direction: column; height: 100vh; user-select: none; } /* Paper Texture Simulation */ .paper-texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; z-index: -1; attachment: fixed; background-image: repeating-linear-gradient(45deg, #fff 0%, #eee 100%), radial-gradient(circle, transparent 0%, #000 100%); mix-blend-mode: multiply; } /* Main Layout */ header { padding: 20px; text-align: center; border-bottom: 2px solid rgba(0,0,0,0.1); position: relative; z-index: 10; } h1 { font-family: 'Courier New', Courier, cursive; font-size: 2em; letter-spacing: 2px; transform: rotate(-1deg); display: inline-block; border: 2px solid var(--ink-color); padding: 5px 15px; background: #fff; box-shadow: 3px 3px 0px rgba(0,0,0,0.1); transform-origin: center center; animation: floatTitle 3s infinite ease-in-out; } @keyframes floatTitle { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-3px); } } /* Control Panel */ #control-panel { position: absolute; top: 20px; right: 20px; width: 300px; background: var(--ui-bg); padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); backdrop-filter: blur(5px); border: 1px solid rgba(0,0,0,0.1); max-height: 90%; overflow-y: auto; } .control-group { margin-bottom: 15px; } label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 0.9em; } input[type="range"] { width: 100%; accent-color: var(--ink-color); } select { width: 100%; padding: 8px; margin-bottom: 15px; border: 2px solid var(--ink-color); background: transparent; font-family: inherit;...

AI 评审点评

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

【CLAUDE】该实现尝试了任务要求的大部分功能结构，但在技术实现层面存在大量严重错误，导致核心功能（手绘滤镜、三阶段动画、有效的控制面板）几乎无法正常工作。SVG 滤镜的 filter 属性被错误地用作 fill，feDisplacementMap 属性名错误，折线图 points 格式错误，控制面板滑块与逻辑完全脱节，悬停效果仅有颜色变化。代码整体是一个「形似而神不似」的实现，展示了对各技术点的粗浅了解但缺乏真正的工程深度与正确性验证，与任务要求的「精心调校」和「高质量」标准相差甚远。 【GEMINI】模型完成了一个高质量的单页应用框架，代码逻辑清晰且具备良好的扩展性。在 SVG 滤镜和动画编排方面，模型实现了一些核心功能，但对于题目中要求的复杂交互细节（如多阶段弹跳、图表类型间的形变过渡、元素淡出效果）实现得不够完整，整体表现符合中等偏上水平，但在高级特性的深度挖掘上仍有提升空间。 【KIMI】该实现未能满足题目核心要求。手绘滤镜系统缺乏差异化配置，动画编排仅实现了基础功能而缺失关键的三阶段设计，交互功能大量失效或未实现。代码存在语法错误（filterUnits属性），整体完成度不足，视觉效果与「手绘艺术风格与数据可视化的完美结合」目标差距明显。建议在滤镜差异化、动画阶段设计、交互细节实现方面进行深度重构。

相关链接

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

加载中...
100%