kimi-k2.7-code 在「SVG 蒙版文字聚光灯效果」的评测结果

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

基本信息

  • 模型名称：kimi-k2.7-code
  • 用例名称：SVG 蒙版文字聚光灯效果
  • 测试类型：网页生成
  • 评测维度：SVG 动效

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

创建一个 SVG 蒙版文字聚光灯效果页面。 功能要求： - 页面背景为纯黑色 - 页面中央有一段文字（如「探索黑暗中的光」），默认不可见或极暗 - 鼠标在页面上移动时，以鼠标位置为圆心产生一个圆形聚光灯区域 - 聚光灯范围内的文字变为可见的白色或亮色 - 使用 SVG mask 或 radial-gradient 实现遮罩效果

任务要求

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

  1. 页面背景为纯黑色
  2. 页面中央有可辨认的文字内容
  3. 鼠标移动时产生圆形聚光灯区域
  4. 聚光灯内文字清晰可见，聚光灯外文字不可见或极暗
  5. 效果跟随鼠标实时更新

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html SVG 聚光灯文字效果 /* 重置边距，实现全屏效果 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { /* 纯黑背景 */ background-color: #000; /* 隐藏滚动条 */ overflow: hidden; /* 鼠标使用十字或默认指针都可以 */ cursor: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; } /* 全屏 SVG 容器 */ #stage { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* 禁止选中文字 */ user-select: none; } /* 暗处文字：极暗、几乎不可见 */ .text-dark { font-size: 80px; font-weight: 900; letter-spacing: 0.1em; fill: #1a1a1a; } /* 聚光灯下文字：高亮白色并带轻微发光 */ .text-light { font-size: 80px; font-weight: 900; letter-spacing: 0.1em; fill: #fff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); } /* 提示文字 */ .hint { position: fixed; bottom: 30px; width: 100%; text-align: center; color: #333; font-size: 14px; pointer-events: none; letter-spacing: 0.05em; } 探索黑暗中的光 探索黑暗中的光 移动鼠标，照亮黑暗中的文字 (function () { const svg = document.getElementById('stage'); const spotlight = document.getElementById('spotlight'); // 创建一个点对象，用于坐标转换 const point = svg.createSVGPoint(); /** * 将鼠标在屏幕上的坐标转换为 SVG 内部坐标 * @param {number} clientX 鼠标 X 坐标 * @param {number} clientY 鼠标 Y 坐标 * @returns {Object} {x, y} */ function getSVGCoordinates(clientX, clientY) { point.x = clientX; point.y = clientY; // 将屏幕坐标系映射到 SVG 的 viewBox 坐标系 const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse()); return { x: svgPoint.x, y: svgPoint.y }; } /** * 更新聚光灯位置 */ function moveSpotlight(clientX, clientY) { const pos = getSVGCoordinates(clientX, clientY); spotlight.setAttribute('cx', pos.x); spotlight.setAttribute('cy', pos.y); } // 监听鼠标移动 document.addEventListener('mousemove', function (e) { moveSpotlight(e.clientX, e.clientY); }); // 监听触摸移动，兼容移动端 document.addEventListener('touchmove', function (e) { const touch = e.touches[0]; if (touch) { moveSpotlight(touch.clientX, touch.clientY); } }, { passive: true }); // 窗口大小改变时无需额外处理，SVG preserveAspectRatio 会自动适配 })(); ```

AI 评审点评

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

【CLAUDE】该实现完整、规范地完成了SVG蒙版文字聚光灯效果的所有功能要求。技术选型合理（SVG mask + feGaussianBlur），视觉效果精良，代码结构清晰有注释，是一个高质量的实现。坐标转换处理正确，兼容触摸设备，整体表现优秀。 【GEMINI】这是一份教科书级别的实现。模型不仅完全满足了所有功能和技术要求，还在视觉细节（边缘羽化、发光效果）和交互鲁棒性（坐标转换算法、移动端兼容）上表现卓越，代码整洁且注释清晰。 【KIMI】该实现是一个高质量的 SVG 聚光灯效果方案，核心采用 SVG mask 技术而非 CSS radial-gradient，严格符合题目对 SVG mask/clipPath 的要求。双层文字叠加方案虽然存在理论上的冗余，但实际效果稳定可靠。代码注释丰富、结构清晰，坐标转换处理专业，且兼顾了移动端触摸交互。整体在功能完整性、视觉表现力和代码规范性方面均达到优秀水平， minor 改进空间在于 viewBox 的响应式处理和动画帧优化。

进阶难度评测结果

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

模型生成产物

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

```html SVG 聚光灯文字效果 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; background-color: #050505; overflow: hidden; font-family: 'Noto Sans SC', sans-serif; cursor: none; /* 隐藏默认光标，使用自定义光圈 */ } /* 容器 */ .stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } /* SVG 铺满屏幕 */ #spotlight-svg { width: 100vw; height: 100vh; display: block; } /* 提示文字 */ .hint { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.35); font-size: 14px; letter-spacing: 0.15em; pointer-events: none; user-select: none; text-align: center; transition: opacity 0.6s ease; z-index: 10; } /* 自定义光圈游标 */ .cursor-ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width 0.1s ease, height 0.1s ease, opacity 0.3s ease; z-index: 20; mix-blend-mode: screen; } /* 半径数值显示 */ .radius-badge { position: fixed; top: 40px; right: 40px; color: rgba(255, 255, 255, 0.5); font-size: 12px; letter-spacing: 0.1em; pointer-events: none; user-select: none; opacity: 0; transition: opacity 0.4s ease; z-index: 10; } /* 微光噪点背景 */ .noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); z-index: 5; } RADIUS 120px 光之所至 方见色彩 MOVE MOUSE · SCROLL TO RESIZE 移动鼠标照亮文字 · 滚动滚轮调节光圈 const svg = document.getElementById('spotlight-svg'); const lightCircle =...

AI 评审点评

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

【CLAUDE】该实现整体思路正确，视觉设计有一定水准，交互细节（平滑跟随、自定义光圈、半径提示）丰富。核心问题在于SVG radialGradient的使用存在技术缺陷——将其定义在mask内部且未设置gradientUnits='userSpaceOnUse'，导致JS动态更新渐变位置时坐标系不匹配，聚光灯效果可能无法正确跟随鼠标。若修正此问题（在defs中定义radialGradient并添加gradientUnits='userSpaceOnUse'），整体效果将显著提升。 【GEMINI】这是一份非常优秀的代码实现。模型不仅精准地完成了所有技术指标（如 SVG mask 的应用、滚轮交互、坐标转换），还在视觉设计上展示了极高的审美，通过滤镜、噪点和顺滑的动画过渡提升了用户体验。代码健壮且具有专业的前端工程水准。 【KIMI】该实现整体达到了中等偏上水平，成功构建了具有设计感的SVG聚光灯文字效果。核心交互逻辑完整，视觉表现力强，代码组织较为专业。主要改进空间在于：优化mask与gradient的联动机制以避免潜在渲染问题，增强响应式适配，以及更严格地满足'多行彩色渐变文字'的要求。作为medium难度任务，该输出展现了良好的前端工程能力，但细节打磨仍有提升余地。

困难难度评测结果

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

模型生成产物

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

下面是一份完整的单文件 HTML 应用，使用 **SVG ``** 实现聚光灯遮罩，所有 CSS 与 JavaScript 均内联。动画由 `requestAnimationFrame` 驱动，聚光灯位置、半径、透明度均使用线性插值（lerp）实现平滑惯性缓动。 ```html SVG 蒙版聚光灯文字 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; } /* 全屏 SVG 舞台 */ #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } /* 文字默认被 mask 隐藏，只有 spotlight 区域可见 */ .poem-text { font-size: 92px; font-weight: 800; letter-spacing: 8px; fill: url(#textGradient); filter: url(#textGlow); } /* 右下角操作提示 */ .hint { position: fixed; bottom: 28px; right: 28px; z-index: 10; pointer-events: none; user-select: none; color: rgba(255, 255, 255, 0.75); font-size: 14px; line-height: 1.6; text-align: right; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); } .hint kbd { display: inline-block; padding: 2px 8px; margin: 0 2px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); color: #fff; font-family: inherit; font-size: 13px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; } 星河沉入海 萤火吻夜来 你指尖掠过的黑暗 皆成彩色的诗行 滚轮 调节光源大小 Shift + 点击 钉住 / 移除光源 最多可钉住 3 个光源 ;(function () { 'use strict' const SVG_NS = 'http://www.w3.org/2000/svg' const svg = document.getElementById('stage') const maskGroup = document.getElementById('maskSpotlights') // ============ 工具函数 ============ /** 线性插值 */ function lerp(start, end, factor) { return start + (end - start) * factor } /** 限制数值范围 */ function clamp(val, min, max) { return Math.max(min, Math.min(max, val)) } /** 两点距离 */ function distance(a, b) { const dx = a.x - b.x const dy = a.y - b.y return Math.sqrt(dx * dx + dy * dy) } /** 将屏幕坐标转换为 SVG 用户坐标 */ function toSVGPoint(clientX, clientY) { const pt = svg.createSVGPoint() pt.x = clientX pt.y = clientY return...

AI 评审点评

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

【CLAUDE】这是一份高质量的SVG蒙版聚光灯效果实现，完整覆盖了所有功能要求，技术实现规范，视觉表现精致，代码结构清晰。特别值得称赞的是：正确使用SVG mask而非CSS替代方案、四维度lerp插值的精细化处理、开场动画的双阶段缓动设计，以及诗句内容与整体氛围的高度契合。主要改进空间在于交互反馈的细节完善（钉住动画、上限提示等）。整体达到生产级别的实现水准。 【GEMINI】这是一份极高水平的交付结果。模型不仅完全遵循了所有的技术约束（SVG mask、lerp、requestAnimationFrame），还在视觉细节和交互深度上做了额外优化，如加入文字发光滤镜、专业的缓动函数以及严谨的坐标转换逻辑。代码结构清晰，注释到位，是一个专业前端工程师的示范级作品。 【KIMI】该实现是一份高质量的SVG mask聚光灯效果，核心架构正确，动画流畅，视觉氛围营造到位。主要扣分点在于钉住光源的移除交互设计不够友好（阈值过小）、开场动画与正常状态切换的硬过渡、以及部分用户体验细节（无半径数值反馈、鼠标重入跳变）。整体达到hard难度题目的良好水平，但在交互鲁棒性和边缘场景处理上仍有提升空间。

相关链接

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

加载中...
100%