首页
/
行业洞察
/
正文
INDUSTRY INSIGHT · 深度
把一张穿孔卡做成可导出的 SVG
📅 2026/10/25 20:35:36
✍️ 爱科研究院
👁 阅读 3,247
复古界面最容易做出“像真的”也最容易顺手写下“仿真”。一张浅黄色卡片配上等距孔位就有了老机器的气息但它并没有因此成为历史设备的编码器。这个小工具只做一件事把一段短 ASCII 文本转换为八位二进制再画成 SVG 孔位。每个字符占一行最高位在左1 画深色孔0 画浅色格。这里采用的是为了阅读而设计的八列排布不是 Hollerith 卡片的列码也不承诺能被任何实体读卡器识别。先约定编码再画纸张例如H的码值是 72对应01001000。如果只从第二、第五格打孔读者就能手工检查这一行。中文字符则不在本例的范围内不要悄悄取 UTF-16 低八位那会产生可画却不可解释的结果。SVG 可以把几何与导出内容放在同一份文本里。SVG 2 的路径规范明确区分位置、线段和曲线命令这个卡片甚至用不到复杂路径圆角矩形就足够。图形简单错误也更容易看见。下面代码在 Node.js 中直接运行会生成一份card.svg。标签经过 XML 转义输入限制为最多 24 个可打印 ASCII 字符。导出的是矢量文档尺寸可以缩放字体外观仍取决于打开它的环境。若做浏览器下载需要额外处理 Blob URL 的释放和用户触发不是把文件扩展名改成 SVG 就算完成。复古质感别抢走信息纸边噪点、折痕和编号可以后加但不能覆盖孔位。可访问版本还应保留原文本和二进制字符串让不方便读图的人也能拿到同样的信息。例子在desc中放入了原文并在每行右侧写出位串。本地检查验证了H的位串、孔数量、XML 特殊字符转义和非 ASCII 拒绝没有对实体打印、读卡器、浏览器字体做兼容测试。它适合做一张程序员节纪念卡。只要把装饰规则说清楚玩具也可以很认真。可独立运行的核心例子const fs require(node:fs); const xml s s.replace(/[]/g, c ({:amp;,:lt;,:gt;,:quot;,:apos;}[c])); function bits(text) { if (!text.length || text.length24 || /[^\x20-\x7E]/.test(text)) throw Error(只接受1到24个可打印ASCII字符); return [...text].map(c c.charCodeAt(0).toString(2).padStart(8,0)); } function card(text) { const rowsbits(text), h80rows.length*28; const cellsrows.flatMap((row,y) [...row].map((b,x) rect x${28x*22} y${48y*28} width14 height18 rx3 fill${b1?#453f4d:#e3d7c4}/)); const labelsrows.map((row,y) text x220 y${62y*28} font-size12${row}/text); return svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 340 ${h} descASCII八位装饰卡${xml(text)}/desc rect width340 height${h} rx12 fill#f6ead6/ text x28 y28DECORATIVE ASCII CARD/text ${cells.join()}${labels.join()}/svg; } if(bits(H)[0]!01001000) throw Error(编码错误); if((bits(H)[0].match(/1/g)||[]).length!2) throw Error(孔数错误); if(!card().includes(lt;amp;)) throw Error(转义错误); let rejectedfalse;try{bits(秋);}catch{rejectedtrue;} if(!rejected) throw Error(非ASCII不应静默截断); fs.writeFileSync(card.svg,card(HELLO 1024)); console.log(已生成 card.svg装饰编码不用于实体检票或读卡);
📌 标签:
工业官网
设计趋势
AI 建站
SEO
获取完整报告 →
RELATED ARTICLES
推荐阅读
2026/10/25 20:35:36
ASCII 图像先校正字符比例
2026/10/25 20:35:36
给代码写诗助手一份能验收的任务单
2026/10/25 20:30:36
MLOps工具链协同实战:Neptune、MLflow、WhyLabs与Arize集成指南
2026/10/25 21:40:46
大语言模型能力边界与工程实践:原理、局限与落地策略
2026/10/25 21:40:46
M3芯片用VMware Fusion跑Ubuntu ROS2无人车仿真全记录
2026/10/25 21:40:46
arduino-builder:命令行驱动的Arduino编译流水线与CI实践
2026/10/25 21:40:46
DJGPP 2.04:DOS下32位C/C++编译器套件搭建与使用指南
2026/10/25 21:35:46
BPSK直接序列扩频实战:从负信噪比解调到USRP落地避坑
2026/10/25 21:35:46
模块化农业表型系统:让AI真正下田的工程实践
2026/10/25 0:02:11
全国计算机二级C语言真题PDF高效刷题指南
2026/10/25 0:02:11
requests+BeautifulSoup:爬虫抓取h1标题的入门实战指南
2026/10/25 0:02:11
递推最小二乘参数辨识MATLAB编程:二阶系统与渐消记忆实现
2026/10/25 0:02:11
全国计算机二级C语言真题PDF高效刷题指南
2026/10/25 0:02:11
requests+BeautifulSoup:爬虫抓取h1标题的入门实战指南
2026/10/25 0:02:11
递推最小二乘参数辨识MATLAB编程:二阶系统与渐消记忆实现
2026/10/24 19:17:18
我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频
2026/10/23 10:58:39
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证
2026/10/25 12:42:56
2026 大模型集体涨价:用 Python 做企业 Token 成本测算与选型避坑(附配置)