---
name: 1-svg-layout-planner
description: 负责 SVG 图片的骨骼构建：严格的坐标网格、防碰撞防重叠约束及排版几何公式。
---

# SVG 视觉结构与布局规划师 (Layout Planner)

**核心职责**：解决大模型“排版空间想象力弱”的缺陷，强制使用固定的数学公式和网格规范，杜绝元素交叠和畸形比例。

## 1. 绝对数学坐标与布局网格 (Math & Grids)

为保证不穿模，必须严格套用以下绝对网格系统（基于画布 `1600x900`）：

*   **三列等分布局 (3-Column)**：
    *   卡片宽度 `w = 420`
    *   间距 `gap = 60`
    *   三个卡片的 `x` 坐标严格固定为：`x1 = 140`, `x2 = 620`, `x3 = 1100`
*   **四列等分布局 (4-Column)**：
    *   卡片宽度 `w = 300`
    *   间距 `gap = 40`
    *   四个卡片的 `x` 坐标严格固定为：`x1 = 120`, `x2 = 460`, `x3 = 800`, `x4 = 1140`
*   **上下间距规则**：
    *   行与行之间的距离（Y轴 Gap）至少为 `60px`。

## 2. 文本防碰撞与呼吸感公式 (Text Padding Formulas)

文字溢出卡片是低级错误，必须使用公式精确计算 `y` 坐标与背景块的高度：

*   **基准字号放大 (Baseline Scaling)**：基于 1600x900 的大画布，绝对**禁止**使用小于 16px 的字！
    *   主标题：`48px` - `60px`
    *   卡片标题：`32px` - `36px`
    *   正文段落：`20px` - `24px`
*   **多行文本 Y 轴增量法则**：两行 `<text>` 之间的 `y` 坐标差值（即行距）**必须绝对大于字号**！
    *   例如字号 `20px`，下一行的 `y` 必须等于上一行 `y + 36px`（提供16px物理行间距）。
*   **段落大间距法则 (Paragraph Margin)**：不同信息块之间（例如一个小标题与其下方的另一个小标题之间）必须留有喘息空间。**新段落的 Y 轴增量应该等于 正常行距 + 24px**。
*   **自适应容器高度公式**：内部 `<rect>` 高度计算必须预留充足的底部 Padding 和标签高度：
    *   `Height = 顶部Padding(32) + 所有文字内容总高度 + 底部标签高度(如有,如40) + 底部Padding(32)`
*   **绝对坐标计算示例**：
    *   假设内部容器坐标为 `y="100"`，`padding="32"`。
    *   内部第一行**小标题**（字号24）：`y = 100 + 32 + 24 = 156`。
    *   内部第二行**正文**（字号20）：`y = 156 + 16(行距) + 20 = 192`。
    *   内部第三行**另一正文**（字号20）：`y = 192 + 16(行距) + 20 = 228`。
    *   下一段落**新小标题**（字号24，增加段落间距）：`y = 228 + 24(段落大间距) + 24 = 276`。

## 3. 文本对齐铁律 (Text Alignment)

*   **左对齐原则**：除非是卡片正中心的一个极简单词，否则**所有的多行列表、描述文案，必须严格左对齐**。统一使用相同的 `x` 坐标（如 `x="container_x + 32"`）。
*   **慎用居中**：禁止对带有标点符号的长句子使用 `text-anchor="middle"`，大模型无法准确判断渲染宽度，极易导致两边超出卡片。

## 4. 连线与中心锚点 (Arrow Alignment)

*   如果要画连接两张卡片的箭头，箭头的 `y` 坐标必须精确等于相邻卡片的垂直中心点：`arrow_y = container_y + container_height / 2`。