Euler Rap · 全栈与 AI 研发
细雨初晴
在利用大语言模型（Large Language Models, LLMs）和编码代理（Coding Agents）进行批量前端与交互式页面重构时，最常见的问题是模型的幻觉通过（Hallucinated Completion）——即模型修改完几行 CSS 后即声称“已完美适配手机端并解决所有冲突”，而实际在真实浏览器渲染时仍然存在横向滚动条、元素打架或 JavaScript 控制台报错。为了彻底解决
细雨初晴
目标在一个纯 SVG + CSS 关键帧的插画里，让骑行者的双脚真实跟随圆周运动的踏板——膝盖按力学关系弯曲，而不是把整条腿硬邦邦地绕髋关节转一个角度。没有 JavaScript，没有 SMIL，只有 @keyframes。适用场景：骑行、跑步、划船、任何"末端执行器沿已知轨迹运动"的 2D 矢量角色动画。为什么单段旋转不行把大腿+小腿画成一条固定路径、整体绕髋关节旋转，脚踝的位移是 L·Δθ（L
细雨初晴
几何完全正确的车轮动画，仍可能"看起来不对"。原因是动起来的图形要经过人眼和时间两个环节，而这两个环节都不在几何模型的假设里。本文记录两类反直觉的失效，以及无头逐帧校验的可靠做法。一、等分辐条必然混叠，旋转速度是假的现象12 根均匀分布的辐条，按 2s/圈 匀速旋转。渲染结果逐帧都正确，但看上去像在以 12 倍速狂转，或者贴近帧率时出现频闪、甚至倒转（马车轮效应）。根因n 根等角间隔的辐条构成的图
细雨初晴
矢量图是用几何图元（点、直线、曲线、多边形）和数学参数描述的图像，与按像素存储的位图相对。矢量图不依赖分辨率，缩放、旋转、平移时不会失真。与位图的区别特性矢量图位图 / 栅格图存储内容几何命令与参数像素颜色矩阵缩放无限缩放不失真放大后出现锯齿或模糊文件大小图形简单时较小与分辨率相关编辑方式修改路径与属性逐像素处理适合场景图标、字体、LOGO、插画、CAD、UI照片、复杂纹理、扫描件屏幕最终显示仍是
细雨初晴
用 <defs> 定义图形组件、再用 <use> 实例化，是 SVG 复用几何的标准做法；配合 CSS 动画时会踩到两个反直觉的坑。两者都源自同一件事：<use> 会把模板元素克隆进一棵影子树，而 DOM 查询拿到的永远是 <defs> 里的模板本身。陷阱一：class 同时挂在模板和宿主上，动画叠加两次触发条件模板带 class，实例的包装组又带了