Google: Gemma 4 31B 在「SVG 蒙版文字聚光灯效果」的评测结果

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

基本信息

  • 模型名称：Google: Gemma 4 31B
  • 用例名称：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. 效果跟随鼠标实时更新

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个完整的前端实现。我采用了 **SVG Mask（遮罩）** 的方案，因为相比于 CSS 渐变，SVG 遮罩在处理复杂文字排版和边缘平滑度上具有更好的性能和灵活性。 你可以直接将以下代码保存为 `.html` 文件并在浏览器中打开。 ```html SVG 蒙版文字聚光灯效果 /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; overflow: hidden; background-color: #000; /* 页面背景纯黑 */ display: flex; justify-content: center; align-items: center; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; } /* SVG 容器铺满全屏 */ #spotlight-svg { width: 100vw; height: 100vh; pointer-events: none; /* 让 SVG 不拦截鼠标事件，确保能捕捉到 body 的移动 */ } /* 文字样式 */ .spotlight-text { font-size: 80px; font-weight: bold; fill: #ffffff; /* 聚光灯照亮后的颜色 */ text-anchor: middle; dominant-baseline: middle; user-select: none; } /* 装饰性提示文字 */ .hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #333; font-size: 14px; letter-spacing: 2px; transition: opacity 0.3s; } 请在页面上移动鼠标 探索黑暗中的光 const maskCircle = document.getElementById('maskCircle'); const hint = document.querySelector('.hint'); // 聚光灯半径 const radius = 150; /** * 监听鼠标移动事件 */ window.addEventListener('mousemove', (e) => { // 获取鼠标当前的 X 和 Y 坐标 const mouseX = e.clientX; const mouseY = e.clientY; // 更新 SVG 圆形的中心点坐标 // 使用 requestAnimationFrame 优化性能，确保在浏览器刷新帧时更新 requestAnimationFrame(() => { maskCircle.setAttribute('cx', mouseX); maskCircle.setAttribute('cy', mouseY); }); // 鼠标移动后隐藏提示文字 if (hint) { hint.style.opacity = '0'; } }); /** * 适配窗口大小变化 * 确保 SVG 始终覆盖全屏 */ window.addEventListener('resize', () => { // SVG 已经在 CSS 中设置了 100vw/vh，无需额外 JS 处理 }); /** * 触摸屏支持 (移动端) */ window.addEventListener('touchmove', (e) => { const touch = e.touches[0]; const mouseX = touch.clientX; const mouseY = touch.clientY; requestAnimationFrame(() => { maskCircle.setAttribute('cx', mouseX); maskCircle.setAttribute('cy', mouseY); }); if (hint) hint.style.opacity = '0'; }, { passive: true }); ``` ### 技术实现要点解析： 1. **SVG Mask 机制**： * 我使用了 ``。在 SVG 遮罩中，**白色 (`#fff`)** 代表 100% 不透明（可见），**黑色 (`#000`)** 代表 100% 透明（不可见）。 *...

AI 评审点评

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

【CLAUDE】这是一个高质量的 SVG 聚光灯效果实现。候选输出准确理解了任务需求，使用 SVG mask 技术正确实现了鼠标跟随的动态遮罩交互，代码完整可运行且结构清晰。技术解析部分展现了对 SVG mask 机制的深入理解。主要改进空间在于：实际应用模糊滤镜以实现柔和边缘效果，清理未使用的代码片段。整体表现优秀，完全满足基础难度测试的要求。 【GEMINI】这是一个高质量的实现。模型不仅准确理解了 SVG Mask 的工作原理，还提供了性能优化方案和移动端兼容方案。代码可以直接运行，视觉交互效果自然，注释对技术要点的解析也非常到位。 【KIMI】整体上，这个实现满足了题目要求，功能完整，视觉效果良好，代码质量较高。在细节上还有优化空间，但不影响核心功能的实现。

进阶难度评测结果

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

模型生成产物

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

这是一个极具视觉冲击力的前端实现。为了达到“设计感”，我采用了深邃的黑色背景，搭配高饱和度的线性渐变文字，并利用 SVG 的 `mask` 结合 `stdDeviation` 滤镜来营造真实的柔光边缘效果。 以下是完整的单页代码： ```html SVG Spotlight Mask - 视觉探索 :root { --bg-color: #050505; --text-color: #ffffff; --accent-gradient: linear-gradient(135deg, #ff00cc, #3333ff, #00ffcc); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-color); color: var(--text-color); font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; cursor: none; /* 隐藏原生鼠标，增强沉浸感 */ } /* 容器布局 */ .container { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } /* 文字样式 */ .text-content { position: absolute; text-align: center; user-select: none; pointer-events: none; z-index: 1; } .text-content h1 { font-size: 8vw; font-weight: 900; line-height: 1.1; letter-spacing: -2px; /* 渐变文字实现 */ background: linear-gradient(to right, #ff00cc, #3333ff, #00ffcc, #ffcc00); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 5s ease infinite; } .text-content p { font-size: 1.5vw; margin-top: 20px; opacity: 0.8; letter-spacing: 8px; text-transform: uppercase; background: linear-gradient(to right, #fff, #888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* SVG 遮罩层 */ #mask-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } /* 提示信息 */ .hint { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #444; letter-spacing: 2px; transition: opacity 0.5s; z-index: 10; } /* 自定义光标点 */ .cursor-dot { position: fixed; width: 4px; height: 4px; background: white; border-radius: 50%; pointer-events:...

AI 评审点评

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

【CLAUDE】代码存在严重的技术实现错误。CSS mask-image: url(#spotlight-mask) 无法直接引用内联 SVG 的 mask 元素，这种写法在主流浏览器中不生效。正确做法应使用 mask-image: url('data:image/svg+xml;...') 或将 mask 应用在 SVG 内部的元素上。代码中存在多处自相矛盾的修正注释（先用 mix-blend-mode，后改 CSS mask，再用 style 标签隐藏元素），说明作者对实现方案不确定。实际运行时文字不会被正确遮罩，聚光灯效果无法呈现。滚轮缩放和鼠标离开的逻辑代码存在，但因核心遮罩失效而无意义。 【GEMINI】这是一个非常优秀的前端实现。模型不仅准确完成了所有技术指标，还在视觉美感和用户体验上做了额外优化，如动态调整模糊度以匹配光圈大小、添加自定义光标等。代码虽然在最后有一小段补丁式的修正，但整体逻辑清晰，是一个高质量的单页应用示例。 【KIMI】整体而言，这个实现很好地完成了题目要求的功能，视觉效果出色，代码结构清晰。在聚光灯的实现和视觉表现上都达到了很高的水准，只是在代码优化和可读性方面还有提升空间。

困难难度评测结果

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

模型生成产物

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

这是一个极具视觉冲击力的前端实现。我将使用 SVG 的 `` 元素来定义可见区域，并结合 `requestAnimationFrame` 和线性插值（Lerp）算法来实现丝滑的惯性跟随效果。 以下是完整的单页 HTML 代码： ```html SVG Spotlight - 意境文字交互 :root { --bg-color: #050505; --text-color: #ffffff; --accent-color: #00f2ff; } body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: var(--bg-color); overflow: hidden; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } #canvas-container { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; cursor: none; } /* SVG 容器铺满全屏 */ .main-svg { width: 100%; height: 100%; pointer-events: none; } /* 操作提示 */ .instructions { position: absolute; bottom: 30px; right: 30px; color: rgba(255, 255, 255, 0.4); font-size: 14px; letter-spacing: 1px; pointer-events: none; text-align: right; line-height: 1.8; transition: opacity 0.5s ease; } .instructions b { color: var(--accent-color); } /* 隐藏原生光标 */ body { cursor: none; } 万物静默 唯有光影在低语 在深邃的黑夜中寻找色彩的碎片 滚轮调节大小 (60px - 300px) Shift + 点击 钉住/移除光源 (最多3个) /** * 配置与状态 */ const config = { lerpFactor: 0.12, // 惯性缓动系数 (0-1)，越小越慢 minRadius: 60, maxRadius: 300, maxPinned: 3 }; const state = { mouse: { x: window.innerWidth / 2, y: window.innerHeight / 2 }, current: { x: window.innerWidth / 2, y: window.innerHeight / 2, r: 150, opacity: 0 }, pinned: [], // 存储钉住的光源 {x, y, r, element} isEntering: true, startTime: Date.now() }; const maskGroup = document.getElementById('maskGroup'); const container = document.getElementById('canvas-container'); // 创建一个带有径向渐变的 SVG 滤镜圆，用于实现柔和边缘 // 因为 SVG mask 内部的颜色亮度决定透明度，白色=可见，黑色=隐藏 function createSpotlightElement(radius) { const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // 创建径向渐变 const radialGrad = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); radialGrad.setAttribute("id", `grad_${Math.random().toString(36).substr(2, 9)}`); const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); stop1.setAttribute("offset", "0%");...

AI 评审点评

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

【CLAUDE】这是一个完成度很高的实现，所有核心功能均已实现且视觉效果精致。代码使用了正确的 SVG mask 技术，通过 radialGradient 实现柔和边缘，lerp 惯性缓动流畅自然，交互逻辑完整。主要扣分点在于：坐标转换逻辑在非正方形视口下会导致聚光灯变形、radialGradient 未清理导致潜在内存泄漏、开场动画结束后半径更新逻辑缺失。整体而言是一个高质量的前端交互作品，符合「高级 SVG 蒙版文字聚光灯效果」的定位。 【GEMINI】这是一个非常优秀的高级交互实现。模型不仅准确理解了所有复杂的功能需求（如多聚光灯模式和惯性缓动），还在代码质量和视觉表现上达到了很高水准。技术细节处理到位，完全符合“资深前端开发工程师”的设定。 【KIMI】整体而言，这是一个高质量的实现，基本满足了所有功能和视觉要求。代码结构清晰，注释详细，动画流畅，视觉细节丰富。但在用户体验方面还有改进空间，如实现鼠标跟随聚光灯的惯性缓动效果。

相关链接

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

加载中...
100%