本文详解为何在 `console.log` 中使用 url 编码的 svg 动画会失败（尤其是多帧 `background-image` 切换时），并提供基于 base64 编码 + 正确 css 作用域的可靠解决方案。
在浏览器控制台中通过 %c 样式打印带动画的 SVG 图形，是一种富有创意的调试或品牌化输出方式。但许多开发者会遇到这样的问题：当 @keyframes 中定义了多个含 background-image: url("data:image/svg+xml,...") 的关键帧（如 10% 和 70%）时，动画完全不生效；而删掉其中某一项后却“意外”正常——这并非 CSS 语法错误，而是由 URI 编码限制 和 CSS 作用域缺失 共同导致。
? 根本原因分析
encodeURIComponent() 不适用于嵌套 SVG 的 data URI
原代码中对整个 SVG 字符串（含.box 类定义位置错误：CSS 作用域失效
原始background-image 无法触发 @keyframes 继承
即便内联样式存在，background-image: url(...) 加载的是一个静态图像快照，它不执行 JavaScript、不解析 。动画必须由宿主元素（即应用 %c 的伪元素）自身承载。
✅ 正确实现方案：Base64 + 外置动画逻辑
唯一可靠的方式是：将 SVG 作为完整 Base64 编码的 data URI 传入 background-image，同时确保所有动画逻辑由外部 CSS 控制——但注意：console.log 的 %c 不支持外链或全局样式注入，因此我们必须让 SVG 自身成为「可动画的独立单元」，即：
- 使用 btoa() 对原始 SVG 字符串进行 Base64 编码（保留所有标签结构，无双重转义）；
- 将 @keyframes 和 .box 样式直接写在 SVG 内部 （这是 SVG 作为图像格式原生支持的特性）；
- 关键：
⚠️ 注意事项与最佳实践
- btoa() 仅支持 ASCII：若 SVG 含中文或 Unicode 字符，需先用 unescape(encodeURIComponent(str)) 转为 Latin-1 兼容字符串，再 btoa()；现代项目推荐用 TextEncoder + btoa(String.fromCharCode(...)) 安全处理。
- 避免复杂嵌套：控制台渲染性能有限，建议 SVG 精简路径、移除冗余命名空间（如 xmlns:xlink 在纯 fill 场景中非必需）。
- 兼容性提示：Chrome / Edge 支持良好；Firefox 对 %c 中 data URI 动画支持较弱，建议降级为静态 SVG 或纯色切换。
- 调试技巧：将 btoa(svg) 结果复制到地址栏 data:image/svg+xml;base64,... 直接预览，可快速验证 SVG 是否有效。
通过以上修正，你就能稳定地在控制台输出具备多帧 SVG 切换效果的动态 logo 或状态指示器——既专业又具表现力。
