Obsidian

细雨初晴

SVG 纯 CSS 两骨骼 IK 腿部动画 (Two-Bone IK Rig in Pure CSS SVG)

目标在一个纯 SVG + CSS 关键帧的插画里，让骑行者的双脚真实跟随圆周运动的踏板——膝盖按力学关系弯曲，而不是把整条腿硬邦邦地绕髋关节转一个角度。没有 JavaScript，没有 SMIL，只有 @keyframes。适用场景：骑行、跑步、划船、任何"末端执行器沿已知轨迹运动"的 2D 矢量角色动画。为什么单段旋转不行把大腿+小腿画成一条固定路径、整体绕髋关节旋转，脚踝的位移是 L·Δθ（L

Obsidian

细雨初晴

SVG 车轮运动可信度：辐条混叠与地面线速度匹配 (Making SVG Wheel Motion Read Correct - Spoke Aliasing and Ground-Speed Matching)

几何完全正确的车轮动画，仍可能"看起来不对"。原因是动起来的图形要经过人眼和时间两个环节，而这两个环节都不在几何模型的假设里。本文记录两类反直觉的失效，以及无头逐帧校验的可靠做法。一、等分辐条必然混叠，旋转速度是假的现象12 根均匀分布的辐条，按 2s/圈 匀速旋转。渲染结果逐帧都正确，但看上去像在以 12 倍速狂转，或者贴近帧率时出现频闪、甚至倒转（马车轮效应）。根因n 根等角间隔的辐条构成的图

Obsidian

细雨初晴

矢量图 (Vector Graphics)

矢量图是用几何图元（点、直线、曲线、多边形）和数学参数描述的图像，与按像素存储的位图相对。矢量图不依赖分辨率，缩放、旋转、平移时不会失真。与位图的区别特性矢量图位图 / 栅格图存储内容几何命令与参数像素颜色矩阵缩放无限缩放不失真放大后出现锯齿或模糊文件大小图形简单时较小与分辨率相关编辑方式修改路径与属性逐像素处理适合场景图标、字体、LOGO、插画、CAD、UI照片、复杂纹理、扫描件屏幕最终显示仍是

Obsidian

细雨初晴

SVG use 影子树 CSS 动画的两个陷阱 (Two Traps of CSS Animation in SVG use Shadow Tree)

用 <defs> 定义图形组件、再用 <use> 实例化，是 SVG 复用几何的标准做法；配合 CSS 动画时会踩到两个反直觉的坑。两者都源自同一件事：<use> 会把模板元素克隆进一棵影子树，而 DOM 查询拿到的永远是 <defs> 里的模板本身。陷阱一：class 同时挂在模板和宿主上，动画叠加两次触发条件模板带 class，实例的包装组又带了

Obsidian

细雨初晴

压缩 JS 变量语义还原 (Minified JS Semantic Renaming)

压缩 JS 变量语义还原：对 Turbopack/webpack 标准压缩（非 obfuscator 混淆）后的前端 bundle，把单字母变量名恢复成可读语义名的方法论。核心认知：压缩 ≠ 混淆——压缩只改变量名、保结构；字符串字面量（含 GLSL shader 里的英文设计注释）、作用域结构、AST 绑定关系全部完好，所以"变量语义还原"是可行的，且与反混淆（拆旋转器/字符串数组）完全是两回事