glm-4.7 在「SVG 动态手绘风格柱状图」的评测结果

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

基本信息

  • 模型名称：glm-4.7
  • 用例名称：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. 整体视觉具有草图/手绘风格

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

你好！我是前端开发工程师。根据你的需求，我为你设计了一个基于 SVG 的手绘风格柱状图。 ### 设计思路 1. **手绘质感**：核心在于 SVG 的 `` 功能。我使用了 `feTurbulence`（湍流滤镜）生成噪点，再配合 `feDisplacementMap`（置换映射）让原本笔直的线条和柱子边缘产生不规则的抖动，模拟手绘时的不完美感。 2. **生长动画**：利用 CSS 的 `transform: scaleY()` 属性。通过设置 `transform-origin: bottom`，让柱子从底部向上拉伸，配合 `@keyframes` 实现平滑的生长效果。 3. **视觉风格**：采用了类似纸张的米色背景，配合深灰色的线条和手写风格字体，增强草图氛围。 以下是完整的单页 HTML 代码： ```html 手绘风格 SVG 柱状图 /* 页面基础样式 */ body { margin: 0; padding: 40px; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f1ea; /* 米色纸张背景 */ font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', sans-serif; /* 手写风格字体栈 */ color: #333; } /* 图表容器 */ .chart-container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 给容器加一点微弱的纸张纹理感 */ background-image: radial-gradient(#e0e0e0 1px, transparent 1px); background-size: 20px 20px; } /* SVG 样式 */ svg { display: block; width: 100%; max-width: 600px; height: auto; overflow: visible; /* 允许滤镜产生的边缘溢出 */ } /* 文本样式 */ .axis-label { font-size: 14px; fill: #555; /* 文本不应用强烈的抖动滤镜，否则难以阅读，或者应用非常轻微的 */ } .chart-title { font-size: 20px; font-weight: bold; text-anchor: middle; fill: #2c3e50; margin-bottom: 10px; } /* 柱子样式 */ .bar { fill: #6c5ce7; /* 基础颜色 */ fill-opacity: 0.8; stroke: #2d3436; stroke-width: 2; /* 关键：应用手绘滤镜 */ filter: url(#sketchy-filter); /* 动画初始状态 */ transform-box: fill-box; /* 变换基于元素自身盒子 */ transform-origin: bottom; /* 变换原点在底部 */ transform: scaleY(0); animation: grow-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; cursor: pointer; transition: fill-opacity 0.3s; } .bar:hover { fill-opacity: 1; } /* 坐标轴线条样式 */ .axis-line { stroke: #2d3436; stroke-width: 2; fill: none; filter: url(#sketchy-filter); /* 坐标轴也应用手绘滤镜 */ stroke-linecap: round; } /* 网格线样式 */ .grid-line { stroke: #b2bec3; stroke-width: 1; stroke-dasharray: 5, 5; /* 虚线 */ opacity: 0.5; } /* 动画定义 */ @keyframes grow-up { to { transform: scaleY(1); } } /* 为不同的柱子设置动画延迟，形成阶梯感 */ .bar:nth-child(1) {...

AI 评审点评

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

【CLAUDE】该生成结果整体质量中等偏上，代码结构清晰，注释详细，设计思路说明完整。正确运用了 feTurbulence + feDisplacementMap 的核心技术方案，手写字体、米色背景等视觉细节也有所考虑。主要不足在于：手绘滤镜效果强度偏弱，视觉冲击力不足；动画实现存在 SVG transform-origin 的潜在兼容性隐患；Y 轴刻度范围未能完全覆盖数据最大值。代码可直接运行，功能基本完整，是一个合格但有提升空间的实现。 【GEMINI】这是一份高质量的 SVG 动画实现方案。模型不仅准确理解了「feTurbulence」滤镜在模拟手绘质感中的核心作用，还展现了深厚的 CSS 动画功底，解决了 SVG 坐标系缩放的痛点。代码结构清晰，注释详尽，视觉风格统一且美观，完全符合并超出了预期要求。 【KIMI】该实现整体质量较高，完整达成了任务要求的核心功能。手绘视觉效果通过 feTurbulence 滤镜得到了较好呈现，动画实现技术方案合理，图表要素完整。主要改进空间在于：Y 轴刻度范围应覆盖实际数据最大值，可考虑增加动态滤镜参数或更丰富的交互效果，以及为不同柱子添加轻微的色彩或纹理变化以增强真实手绘感。代码质量良好，结构清晰，注释充分，可直接用于生产环境。

进阶难度评测结果

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

模型生成产物

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

这是一个完整的单页 HTML 应用，实现了一个具有手绘艺术风格的交互式 SVG 柱状图。 ### 设计思路与实现细节： 1. **手绘风格核心**： * 使用 SVG 的 `` 元素，结合 `feTurbulence`（湍流噪声）和 `feDisplacementMap`（置换映射）。这会让原本笔直的 SVG 线条和形状边缘产生不规则的扭曲，模拟墨水在纸上晕染或手绘线条的不完美感。 * 字体选用了 Google Fonts 的 `Patrick Hand`，这是一种非常接近手写的字体。 * 背景使用了米色/纸张色调，配合 CSS 的噪点纹理，增强“草图”质感。 2. **动画系统**： * **上升动画**：使用 CSS `@keyframes` 控制 `height` 和 `y` 属性，实现柱子从底部向上生长。 * **抖动效果**：结合 CSS `transform: translate()` 动画，模拟手绘时的手部抖动。 * **交互增强**：当鼠标悬停时，通过添加 CSS 类名，改变抖动的频率和幅度，使柱子看起来“活”了起来。 3. **交互逻辑**： * **Tooltip**：计算鼠标位置或柱子顶部位置，动态更新提示框的内容和坐标。 * **重播功能**：通过移除并重新添加 DOM 类名（触发 Reflow），强制 CSS 动画重新执行。 4. **数据可视化**： * 模拟了 1 月到 6 月的销售数据。 * 坐标轴和网格线同样应用了手绘滤镜，保持视觉一致性。 --- ### 完整代码 你可以直接保存以下代码为 `.html` 文件并在浏览器中打开。 ```html 手绘风格交互式柱状图 :root { --bg-color: #fdfbf7; --ink-color: #2c3e50; --bar-color: #e67e22; --bar-hover-color: #d35400; --grid-color: #bdc3c7; --accent-color: #e74c3c; --font-family: 'Patrick Hand', cursive, sans-serif; } body { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background-color: var(--bg-color); /* 添加纸张纹理 */ background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); font-family: var(--font-family); color: var(--ink-color); overflow: hidden; } header { text-align: center; margin-bottom: 20px; } h1 { font-size: 2.5rem; margin: 0; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); } .subtitle { font-size: 1.2rem; color: #7f8c8d; } /* 图表容器 */ .chart-container { position: relative; width: 800px; height: 500px; background: #fff; border-radius: 4px; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); padding: 20px; /* 容器边缘也稍微不规则一点 */ filter: url(#rough-paper); } svg { width: 100%; height: 100%; overflow: visible; } /* 坐标轴和网格线样式...

AI 评审点评

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

【CLAUDE】该方案在设计思路上较为完整，正确使用了 feTurbulence 滤镜、手写字体、统一配色等手绘风格元素，tooltip 和重播按钮的交互逻辑框架也基本完备。然而核心动画实现存在严重技术错误：SVG rect 的 height/y 属性无法通过 CSS style 直接赋值控制，导致柱子上升动画实际上无法正常运行。这是 SVG 与 HTML 元素属性操作方式混淆的典型问题，应使用 setAttribute 或 Web Animations API 操作 SVG 属性。此外，CSS @keyframes 与 transition 的混用逻辑也较为混乱。整体代码展示了良好的设计意图和 SVG 滤镜知识，但关键动画功能的实现质量不足，需要重构动画部分才能真正可用。 【GEMINI】这是一份高质量的实现方案。模型不仅准确理解了 feTurbulence 的技术细节，还通过 CSS 动画与 JS 逻辑的结合，完美还原了「手绘抖动」这一抽象需求。代码结构清晰，视觉风格高度统一，用户体验流畅，充分展示了对 SVG 高级特性的综合运用能力。 【KIMI】该实现是一个高质量的手绘风格 SVG 柱状图应用。核心亮点在于 feTurbulence 与 feDisplacementMap 的合理分层应用（不同元素使用不同强度的滤镜），以及 CSS 动画与 SVG 的协调配合。代码结构清晰，注释充分，用户体验考虑周到（如动画延迟、弹性缓动函数）。主要改进空间在于可以尝试更激进的 SVG 滤镜参数动画（如动态修改 seed 或 baseFrequency）来实现更真实的「手绘抖动」效果，以及让文字元素也融入手绘风格。

困难难度评测结果

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

模型生成产物

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

这是一个单页 HTML 应用，集成了手绘风格 SVG 滤镜、复杂的动画编排以及完整的交互逻辑。 ### 设计说明 1. **手绘滤镜核心**：利用 SVG 的 `` 产生噪点，配合 `` 对图形进行置换，模拟墨水在纸张上晕染和线条不规则的物理效果。 2. **动画编排**： * **入场**：CSS `transition` 控制高度变化。 * **弹跳**：CSS `@keyframes` 模拟到达顶点的弹性。 * **呼吸**：JavaScript `requestAnimationFrame` 实时修改滤镜的 `baseFrequency`，让图表看起来像是在“活着”一样微微颤动。 3. **交互设计**：悬停时，非聚焦元素通过 CSS `opacity` 和 `filter` 变暗，Tooltip 跟随鼠标并应用同样的手绘滤镜。 ### 代码实现 ```html 手绘风格 SVG 动态图表 :root { --bg-color: #f9f7f1; /* 草稿纸颜色 */ --ink-color: #2c3e50; /* 墨水色 */ --accent-color: #e74c3c; /* 强调色 */ --grid-color: #bdc3c7; --font-main: 'Indie Flower', cursive, sans-serif; } body { margin: 0; padding: 0; background-color: var(--bg-color); font-family: var(--font-main); color: var(--ink-color); display: flex; flex-direction: column; align-items: center; min-height: 100vh; overflow-x: hidden; } /* 布局容器 */ .container { width: 90%; max-width: 1000px; margin: 40px auto; position: relative; } /* 标题区域 */ header { text-align: center; margin-bottom: 20px; position: relative; } h1 { font-size: 3rem; margin: 0; transform: rotate(-1deg); /* 标题也应用轻微抖动滤镜 */ filter: url(#filter-text); } .subtitle { font-size: 1.2rem; color: #7f8c8d; margin-top: 5px; } /* 图表主区域 */ .chart-wrapper { position: relative; background: #fff; border: 2px solid var(--ink-color); border-radius: 2px 255px 3px 25px / 255px 5px 225px 5px; /* 手绘边框效果 */ padding: 20px; box-shadow: 5px 5px 15px rgba(0,0,0,0.05); /* 背景网格纹理 */ background-image: radial-gradient(var(--grid-color) 1px, transparent 1px); background-size: 20px 20px; } svg { width: 100%; height: 500px; display: block; overflow: visible; } /* 控制面板 */ .controls { margin-top: 30px; padding: 20px; background: #fff; border: 2px dashed var(--ink-color); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; filter: url(#filter-ui); } .control-group { display: flex; flex-direction: column; align-items: center; gap: 5px; } label { font-size: 1.1rem; font-weight: bold; } /* 按钮样式 */ button {...

AI 评审点评

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

【CLAUDE】该实现在技术方向上基本正确，正确使用了 feTurbulence + feDisplacementMap 组合滤镜并进行差异化配置，通过 requestAnimationFrame 实现呼吸式抖动，代码结构采用 Class 封装较为清晰。然而存在多个影响实际运行的关键 bug：renderBarChart/renderLineChart 中 padding/height/width 变量作用域错误（应为 this.config.padding 等），可能导致柱状图完全无法渲染；SVG 属性的 CSS transition 兼容性问题；折线图路径长度估算不准确等。功能覆盖面较广但实现深度不足，悬停抖动增强、手绘 tooltip、图表切换过渡动画等核心特性的实现均较为浅层。图例和装饰元素未实现。整体而言是一个思路正确但存在较多实现缺陷的方案，需要较多调试才能正常运行。 【GEMINI】该生成结果完美契合了「资深前端开发工程师」的角色设定。不仅在技术层面精准实现了复杂的 SVG 滤镜组合与多阶段动画，更在视觉艺术风格上表现卓越，代码结构优雅且功能完备，是 SVG 高级特性运用的典范。 【KIMI】该实现是一个高质量的手绘风格 SVG 动态图表应用，核心滤镜技术和动画编排均达到预期要求。feTurbulence 与 feDisplacementMap 的组合使用正确且富有层次感，requestAnimationFrame 驱动的呼吸动画流畅自然。代码架构清晰，交互功能完整。主要改进空间在于：增强柱子顶部手绘笔触的丰富度、实现更明显的形变过渡动画、以及完善悬停时的抖动增强效果。整体而言，是一个技术扎实、视觉效果出色的实现。

相关链接

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

加载中...
100%