<svg viewBox="0 0 960 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.bg { fill: #0f172a; }
.card { fill: #1e293b; rx: 12; ry: 12; stroke: #334155; stroke-width: 1.5; }
.card-sub { fill: #0f172a; rx: 8; ry: 8; stroke: #334155; stroke-width: 1; }
.text-title { fill: #f8fafc; font-family: system-ui, sans-serif; font-weight: 700; font-size: 22px; }
.text-subtitle { fill: #94a3b8; font-family: system-ui, sans-serif; font-size: 14px; }
.text-header { fill: #38bdf8; font-family: system-ui, sans-serif; font-weight: 600; font-size: 16px; }
.text-body { fill: #e2e8f0; font-family: system-ui, sans-serif; font-size: 13px; }
.text-muted { fill: #64748b; font-family: system-ui, sans-serif; font-size: 12px; }
.divider { stroke: #334155; stroke-dasharray: 6,6; }
</style>
</defs>
<rect class="bg" height="500" width="960"></rect>
<text class="text-title" y="45" x="40">图 1.1：普通上网 (C/S 架构) vs P2P 直连联机模式对比</text>
<text class="text-subtitle" y="70" x="40">展示单向发起主动请求与两端双向打洞建立通道的基本差异</text>
<line stroke-width="2" class="divider" y2="420" x2="480" y1="95" x1="480"></line>
<rect class="card" height="320" width="425" y="95" x="40"></rect>
<text fill="#38bdf8" class="text-header" y="125" x="60">🌐 普通上网（客户端 / 服务器 C/S 模式）</text>
<rect class="card-sub" height="50" width="385" y="145" x="60"></rect>
<text class="text-body" y="175" x="75">💻 客户端 (内网): 192.168.1.100</text>
<rect class="card-sub" height="50" width="385" y="210" x="60"></rect>
<text class="text-body" y="240" x="75">🌐 路由器 (NAT): 转换端口向外发起出站连接</text>
<rect stroke="#38bdf8" class="card-sub" height="50" width="385" y="275" x="60"></rect>
<text fill="#38bdf8" class="text-body" y="305" x="75">🖥️ 公网服务器: 8.8.8.8 (固定公网 IP / 监听固定端口)</text>
<text class="text-muted" y="360" x="60">特点：单向主动发起，NAT 极为友好，几乎不受 NAT 类型限制。</text>
<rect class="card" height="320" width="425" y="95" x="495"></rect>
<text fill="#10b981" class="text-header" y="125" x="515">🎮 P2P 游戏联机（点对点直连模式）</text>
<rect class="card-sub" height="50" width="395" y="145" x="515"></rect>
<text class="text-body" y="175" x="530">🕹️ 玩家 A (内网): 192.168.1.100 ↔ NAT 映射 A</text>
<rect stroke="#10b981" class="card-sub" height="50" width="395" y="210" x="515"></rect>
<text fill="#6ee7b7" class="text-body" y="240" x="530">⚡ 双向UDP打洞包 (Hole Punching) 互相直连</text>
<rect class="card-sub" height="50" width="395" y="275" x="515"></rect>
<text class="text-body" y="305" x="530">🕹️ 玩家 B (内网): 192.168.31.50 ↔ NAT 映射 B</text>
<text class="text-muted" y="360" x="515">特点：无中间服务器转发流量，极度依赖双方 NAT 映射与过滤行为。</text>
<rect stroke-width="1" stroke="#10b981" rx="8" fill="#022c22" height="45" width="880" y="430" x="40"></rect>
<text fill="#6ee7b7" class="text-body" y="458" x="60">💡 核心结论：“能网页上网” 并不等于 “能 P2P 联机”，网页只需单向出站，P2P 需要建立双向互通通道。</text>
</svg>
