本文介绍如何通过 SVG 替代 DOM span 布局，实现字符网格在任意屏幕尺寸下自动等比缩放、最大化填充视口，同时保持清晰可读的字体渲染和精确的字符定位。
本文介绍如何通过 svg 替代 dom `span` 布局，实现字符网格在任意屏幕尺寸下自动等比缩放、最大化填充视口，同时保持清晰可读的字体渲染和精确的字符定位。
在构建类终端（terminal-like）Web 应用时，常见的做法是为每个字符创建一个 <span> 元素并统一设置 font-size，但这种方式存在根本性局限：
- 字体大小（px/em）是绝对或相对单位，无法随容器动态缩放；
- 大量 span 元素导致 DOM 膨胀，影响性能与 CSS 控制精度；
- line-height、letter-spacing、字体度量（如 ascent/descent）难以跨设备一致对齐；
- 容器尺寸变化时，需手动重算字体大小并触发重排，逻辑复杂且易出错。
更优解：采用 SVG 的 viewBox + preserveAspectRatio 机制
SVG 原生支持响应式缩放——其 viewBox 定义逻辑坐标系，width/height 控制呈现尺寸，浏览器自动完成等比缩放。字符作为 <text> 元素置于其中，天然继承缩放特性，无需手动调整字号。
以下是一个生产就绪的实现示例（已精简关键逻辑）：
<div id="game"></div>
* { margin: 0; padding: 0; }
html, body { height: 100%; }
#game { height: 100%; }
.cell {
font-family: 'Cascadia Code', 'Courier New', monospace;
font-size: 12px; /* 基准字号（仅用于初始计算，实际由 viewBox 缩放） */
}
svg {
display: block;
width: 100%;
height: 100%;
/* 可选：强制拉伸（不推荐） */
/* preserveAspectRatio="none"; */
}const CHAR_WIDTH = 10; // 逻辑单位宽度（px）
const CHAR_HEIGHT = 14; // 逻辑单位高度（px），含行间距余量
const COLS = 100;
const ROWS = 25;
function draw() {
const game = document.getElementById('game');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
// 关键：定义逻辑画布尺寸（COLS × CHAR_WIDTH, ROWS × CHAR_HEIGHT）
svg.setAttribute('viewBox', `0 0 ${COLS * CHAR_WIDTH} ${ROWS * CHAR_HEIGHT}`);
svg.style.display = 'block';
// 逐字符生成 <text> 元素
for (let y = 0; y < ROWS; y++) {
for (let x = 0; x < COLS; x++) {
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', x * CHAR_WIDTH);
text.setAttribute('y', y * CHAR_HEIGHT);
text.setAttribute('dominant-baseline', 'hanging'); // 顶部对齐（等效于 CSS 的 top）
text.setAttribute('class', 'cell');
text.textContent = Math.floor(Math.random() * 10); // 示例字符
svg.appendChild(text);
}
}
game.appendChild(svg);
}
document.addEventListener('DOMContentLoaded', draw);✅ 核心优势说明：
- viewBox="0 0 1000 350"（100列×10px, 25行×14px）定义了字符网格的逻辑坐标空间；
- <svg width="100%" height="100%"> 让 SVG 占满父容器；
- 浏览器自动按比例缩放整个坐标系，字符、间距、位置全部同步缩放，像素级保真；
- dominant-baseline="hanging" 确保字符顶部严格对齐到指定 y 坐标（避免传统 baseline 引起的垂直偏移）；
- 支持 preserveAspectRatio="xMidYMid meet"（默认）实现居中等比缩放，或 "none" 强制填满（慎用，会失真）。
⚠️ 注意事项：
- 字体必须为等宽（monospace），否则列对齐失效；推荐 Cascadia Code、Fira Code 或系统默认 monospace；
- CHAR_WIDTH/CHAR_HEIGHT 需通过实际字体度量校准（可用 Canvas measureText 辅助），本文值适用于多数 12px Cascadia；
- 如需动态响应窗口 resize，可监听 window.resize 并调用 svg.setAttribute('viewBox', ...) 重新计算（但通常无需，SVG 原生响应）；
- 若需单字符着色，直接设置 <text fill="#ff0000"> 即可，性能远优于 CSS 类切换。
总结：放弃用大量 span 模拟终端的思路，拥抱 SVG 的向量缩放本质——以声明式 viewBox 代替命令式字体重设，代码更简洁、效果更稳定、适配更可靠。这是构建高性能、高保真终端 UI 的现代实践路径。
