| 1 | # Image-Text Showcase — Design Spec |
| 2 | |
| 3 | > Human-readable design narrative. Machine-readable contract: `spec_lock.md`. On divergence, `spec_lock.md` wins. |
| 4 | |
| 5 | ## I. Project Information |
| 6 | |
| 7 | | Item | Value | |
| 8 | | ---- | ----- | |
| 9 | | **Project Name** | Image-Text Showcase | |
| 10 | | **Canvas Format** | PPT 16:9 (1280×720) | |
| 11 | | **Page Count** | 20 | |
| 12 | | **Design Style** | A) General Versatile + editorial-showcase | |
| 13 | | **Target Audience** | 设计师、PPT制作者、AI工具用户 | |
| 14 | | **Use Case** | 图文结合能力展示 / 视觉样例集 | |
| 15 | | **Created Date** | 2026-05-15 | |
| 16 | |
| 17 | --- |
| 18 | |
| 19 | ## II. Canvas Specification |
| 20 | |
| 21 | | Property | Value | |
| 22 | | -------- | ----- | |
| 23 | | **Format** | PPT 16:9 | |
| 24 | | **Dimensions** | 1280×720 | |
| 25 | | **viewBox** | `0 0 1280 720` | |
| 26 | | **Margins** | left/right 60px, top/bottom 50px | |
| 27 | | **Content Area** | 1160×620 (x=60, y=50) | |
| 28 | |
| 29 | --- |
| 30 | |
| 31 | ## III. Visual Theme |
| 32 | |
| 33 | ### Theme Style |
| 34 | |
| 35 | - **Style**: A) General Versatile + editorial-showcase |
| 36 | - **Theme**: 每页独立主题（dark/light 随各页 rendering 而异） |
| 37 | - **Tone**: 多元视觉语言并置；每页是一个独立的视觉风格样本 |
| 38 | |
| 39 | ### Color Scheme |
| 40 | |
| 41 | > 每页颜色服从该页 rendering × palette 组合，以下为 SVG 结构色（非图像色） |
| 42 | |
| 43 | | Role | HEX | Purpose | |
| 44 | | ---- | --- | ------- | |
| 45 | | **Background** | `#0F1117` | 默认深底（各页可覆盖） | |
| 46 | | **Secondary bg** | `#1A1D2E` | 卡片/区块底色 | |
| 47 | | **Primary** | `#7C6FF7` | 主调紫蓝 | |
| 48 | | **Accent** | `#F5A623` | 金橙强调 | |
| 49 | | **Secondary accent** | `#4ECDC4` | 青绿对比 | |
| 50 | | **Body text** | `#E8E8F0` | 正文浅灰白 | |
| 51 | | **Secondary text** | `#9090A0` | 说明文字 | |
| 52 | | **Tertiary text** | `#5A5A72` | 页码/补充 | |
| 53 | | **Border/divider** | `#2A2D3E` | 边框分割线 | |
| 54 | | **Success** | `#4CAF50` | 正向指标 | |
| 55 | | **Warning** | `#EF5350` | 警示标记 | |
| 56 | |
| 57 | ### AI Image Strategy |
| 58 | |
| 59 | 每页图像独立指定 rendering × palette（见 §VIII 及 §IX），非统一锁定。 |
| 60 | |
| 61 | --- |
| 62 | |
| 63 | ## IV. Typography System |
| 64 | |
| 65 | **Typography direction**: contrast — serif title × sans body |
| 66 | |
| 67 | | Role | Chinese | English | Fallback tail | |
| 68 | | ---- | ------- | ------- | ------------- | |
| 69 | | **Title** | `"Microsoft YaHei"` | `Georgia` | `serif` | |
| 70 | | **Body** | `"Microsoft YaHei", "PingFang SC"` | `Arial` | `sans-serif` | |
| 71 | | **Emphasis** | `"Microsoft YaHei"` | `Georgia` | `serif` | |
| 72 | | **Code** | — | `Consolas, "Courier New"` | `monospace` | |
| 73 | |
| 74 | **Per-role font stacks**: |
| 75 | - Title: `Georgia, "Microsoft YaHei", serif` |
| 76 | - Body: `Arial, "Microsoft YaHei", "PingFang SC", sans-serif` |
| 77 | - Emphasis: `Georgia, "Microsoft YaHei", serif` |
| 78 | - Code: `Consolas, "Courier New", monospace` |
| 79 | |
| 80 | **Baseline**: Body = 20px |
| 81 | |
| 82 | | Purpose | Ratio | @ 20px | |
| 83 | | ------- | ----- | ------ | |
| 84 | | Cover title | 3-5x | 60-100px | |
| 85 | | Chapter opener | 2-2.5x | 40-50px | |
| 86 | | Page title | 1.5-2x | 30-40px | |
| 87 | | Subtitle | 1.2-1.5x | 24-30px | |
| 88 | | **Body** | **1x** | **20px** | |
| 89 | | Annotation | 0.7-0.85x | 14-17px | |
| 90 | | Page number | 0.5-0.65x | 10-13px | |
| 91 | |
| 92 | --- |
| 93 | |
| 94 | ## V. Layout Principles |
| 95 | |
| 96 | ### Page Structure |
| 97 | |
| 98 | - **Header area**: y=0~80px，页面标题或留白 |
| 99 | - **Content area**: y=80~670px，主内容区 |
| 100 | - **Footer area**: y=670~720px，页码/标注 |
| 101 | |
| 102 | ### Layout Pattern Library |
| 103 | |
| 104 | 本项目每页使用不同布局，详见 §IX Content Outline。 |
| 105 | |
| 106 | ### Spacing Specification |
| 107 | |
| 108 | | Element | Value | |
| 109 | | ------- | ----- | |
| 110 | | Safe margin | 60px (left/right), 50px (top/bottom) | |
| 111 | | Content block gap | 32px | |
| 112 | | Card gap | 24px | |
| 113 | | Card padding | 28px | |
| 114 | | Card border radius | 12px | |
| 115 | |
| 116 | --- |
| 117 | |
| 118 | ## VI. Icon Usage Specification |
| 119 | |
| 120 | **Library**: `tabler-outline`, stroke-width `2` |
| 121 | |
| 122 | | Purpose | Icon Path | Page | |
| 123 | | ------- | --------- | ---- | |
| 124 | | 图文结合 | `tabler-outline/layout-collage` | P02 目录 | |
| 125 | | 全出血布局 | `tabler-outline/frame` | P02 目录 | |
| 126 | | 左右分栏 | `tabler-outline/layout-columns` | P02 目录 | |
| 127 | | 图文叠压 | `tabler-outline/layers-intersect` | P02 目录 | |
| 128 | | 卡片网格 | `tabler-outline/layout-grid` | P02 目录 | |
| 129 | | 图片 | `tabler-outline/photo` | P02 目录 | |
| 130 | | 调色板 | `tabler-outline/palette` | P02 目录 | |
| 131 | | 画板 | `tabler-outline/artboard` | P02 目录 | |
| 132 | |
| 133 | --- |
| 134 | |
| 135 | ## VII. Visualization Reference List |
| 136 | |
| 137 | Catalog read: 71 templates |
| 138 | |
| 139 | 本项目以图文布局展示为主，无数据图表页，不使用 charts 模板库。 |
| 140 | |
| 141 | No-template-match: all pages use custom layouts designed to demonstrate image-text composition patterns. |
| 142 | |
| 143 | --- |
| 144 | |
| 145 | ## VIII. Image Resource List |
| 146 | |
| 147 | 每页一张AI图，rendering × palette 各页独立。 |
| 148 | |
| 149 | | Filename | Dimensions | Ratio | Purpose | Type | Acquire Via | Status | Reference | text_policy | page_role | |
| 150 | | -------- | ---------- | ----- | ------- | ---- | ----------- | ------ | --------- | ----------- | --------- | |
| 151 | | p01_cover.png | 1280×720 | 1.78 | 封面全出血背景 | Background | ai | Pending | Futuristic frosted glass panels layered over deep space; calm center reserved for title overlay; subtle light refractions at edges | none | hero_page | |
| 152 | | p03_left_img.png | 427×620 | 0.69 | 左1/3竖版图 | Photography | ai | Pending | Professional editorial portrait: diverse creative team collaborating, modern studio, natural sidelighting, shallow depth of field | none | local | |
| 153 | | p04_right_img.png | 800×720 | 1.11 | 右侧出血大图 | Illustration | ai | Pending | Bold flat vector composition: abstract geometric cityscape with sharp color blocks; right edge bleeds off canvas | none | local | |
| 154 | | p05_top_img.png | 1280×320 | 4.0 | 顶部全幅横图 | Background | ai | Pending | Soft watercolor wash: mountain lake at dawn, wide panoramic, muted pastel reflections, top-heavy composition leaving bottom clear | none | local | |
| 155 | | p06_bottom_img.png | 1280×360 | 3.56 | 底部全幅图 | Illustration | ai | Pending | Hand-drawn sketch: cozy reading corner, warm pencil lines, pastel color fills, bottom-weighted scene with open sky at top | none | local | |
| 156 | | p07_z_img1.png | 560×200 | 2.8 | Z型第一段图 | Illustration | ai | Pending | Isometric 3D tech object: server rack or CPU chip, clean shadows, top-left anchor composition | none | local | |
| 157 | | p07_z_img2.png | 560×200 | 2.8 | Z型第三段图 | Illustration | ai | Pending | Isometric 3D network diagram: connected nodes and cables, same isometric angle as img1 | none | local | |
| 158 | | p08_grid_center.png | 400×400 | 1.0 | 九宫格中心图 | Illustration | ai | Pending | Blueprint-style technical schematic: circuit board with grid lines, monospace annotations, monochrome blue-on-dark | none | local | |
| 159 | | p09_circle_img.png | 400×400 | 1.0 | 圆形中心图 | Illustration | ai | Pending | Digital dashboard interface fragment: glowing circular gauge, data rings, dark background, high-tech UI aesthetic | none | local | |
| 160 | | p10_bg_texture.png | 1280×720 | 1.78 | 全幅底纹背景 | Background | ai | Pending | Pixel art cityscape at night: 8-bit buildings and neon signs tiled across the full canvas, vibrant saturated colors | none | hero_page | |
| 161 | | p11_papercut.png | 1280×720 | 1.78 | 剪纸分层背景 | Illustration | ai | Pending | Layered paper-cut landscape: 4 depth layers of mountains and trees, each layer a different green-earth tone, soft cast shadows | none | hero_page | |
| 162 | | p12_poster_img.png | 256×720 | 0.36 | 竖版杂志窄图 | Illustration | ai | Pending | Mid-century vintage poster fragment: bold geometric shapes, halftone texture, limited 3-color palette, vertical composition | none | local | |
| 163 | | p13_diagonal_img.png | 700×420 | 1.67 | 对角线上半图 | Illustration | ai | Pending | Fantasy animation style: dreamy forest scene with soft glowing particles, warm amber light filtering through canopy, Ghibli-inspired atmosphere | none | local | |
| 164 | | p14_fade_bg.png | 1280×720 | 1.78 | 褪色底图 | Background | ai | Pending | Ink wash painting: abstract brushstrokes suggesting mountains and mist, desaturated earthy tones, large central negative space | none | hero_page | |
| 165 | | p15_bottom_img.png | 1280×360 | 3.56 | 下半幅图 | Illustration | ai | Pending | Flat design scene: modern office workspace seen from above, geometric furniture shapes, jewel-tone color palette, clean isometric-free flat view | none | local | |
| 166 | | p16_center_img.png | 480×480 | 1.0 | 中心圆形图 | Illustration | ai | Pending | Minimalist swiss-style graphic: single bold geometric form (circle or square) centered on white field, aggressive negative space, Helvetica-era precision | none | local | |
| 167 | | p17_strip_img.png | 1280×240 | 5.33 | 横贯中部窄条图 | Illustration | ai | Pending | Screen-print style banner: bold halftone pattern, limited 2-color duotone treatment, horizontal rhythm of repeated graphic motifs | none | local | |
| 168 | | p18_polygon_img.png | 600×500 | 1.2 | 不规则多边形图 | Illustration | ai | Pending | Organic nature illustration: lush tropical leaves and botanical elements arranged in a loose hexagonal cluster, earthy warm greens | none | local | |
| 169 | | p19_collage1.png | 380×320 | 1.19 | 蒙太奇图1 | Photography | ai | Pending | Editorial magazine photo: urban architecture detail, dramatic shadow play, high contrast, cropped unconventionally | none | local | |
| 170 | | p19_collage2.png | 380×320 | 1.19 | 蒙太奇图2 | Photography | ai | Pending | Editorial magazine photo: close-up texture surface — fabric or concrete, abstract pattern, monochromatic | none | local | |
| 171 | | p19_collage3.png | 460×320 | 1.44 | 蒙太奇图3（宽） | Photography | ai | Pending | Editorial magazine photo: motion blur street scene, long exposure light trails, cool blue atmosphere | none | local | |
| 172 | | p20_closing.png | 1280×720 | 1.78 | 结尾背景 | Background | ai | Pending | Chalk drawing on blackboard: simple constellation of dots and hand-drawn lines forming a subtle geometric pattern, warm white chalk marks on dark green surface | none | hero_page | |
| 173 | |
| 174 | --- |
| 175 | |
| 176 | ## IX. Content Outline |
| 177 | |
| 178 | ### Part 1: 封面与导航 |
| 179 | |
| 180 | #### Slide 01 — 封面 |
| 181 | |
| 182 | - **Layout**: 全出血背景图 + 居中悬浮标题块 |
| 183 | - **Rendering × Palette**: `glassmorphism` × `dark-cinematic` |
| 184 | - **Image**: p01_cover.png (hero_page，全出血) |
| 185 | - **Title**: 图文结合 |
| 186 | - **Subtitle**: 20种视觉语言的并置实验 |
| 187 | - **Info**: PPT Master · 2026 |
| 188 | |
| 189 | #### Slide 02 — 目录 |
| 190 | |
| 191 | - **Layout**: 左侧深色色块 + 右侧编号列表（无图） |
| 192 | - **Rendering × Palette**: 无图，使用项目主配色 |
| 193 | - **Content**: 列出20页风格速览，每条一行 |
| 194 | |
| 195 | ### Part 2: 图文组合样本 |
| 196 | |
| 197 | #### Slide 03 — 左1/3竖图 + 右文字主体 |
| 198 | |
| 199 | - **Layout**: 左侧竖版图 width=427px，右侧文字区 width=733px |
| 200 | - **Rendering × Palette**: `corporate-photo` × `cool-corporate` |
| 201 | - **Image**: p03_left_img.png |
| 202 | - **Title**: 编辑摄影 × 专业蓝 |
| 203 | - **Content**: 竖版人物图左置，文字在右大面积展开；图文比例约3:7，适合以文字为主的叙述型页面 |
| 204 | |
| 205 | #### Slide 04 — 右图左文，图出血至右边缘 |
| 206 | |
| 207 | - **Layout**: 左侧文字区 width=440px，右侧图出血至边缘 width=840px |
| 208 | - **Rendering × Palette**: `vector-illustration` × `frost-ice` |
| 209 | - **Image**: p04_right_img.png |
| 210 | - **Title**: 矢量插画 × 冰霜白 |
| 211 | - **Content**: 扁平矢量图占据右侧并出血，文字在左浮动；大图小字制造张力 |
| 212 | |
| 213 | #### Slide 05 — 顶部全幅图 + 底部三栏文字 |
| 214 | |
| 215 | - **Layout**: 上半 height=360px 全幅图，下半 height=310px 三栏等宽文字 |
| 216 | - **Rendering × Palette**: `watercolor` × `warm-earth` |
| 217 | - **Image**: p05_top_img.png |
| 218 | - **Title**: 水彩渲染 × 暖土色 |
| 219 | - **Content**: 宽幅水彩图压顶，下方三栏简短文字如图注般排列 |
| 220 | |
| 221 | #### Slide 06 — 底部全幅图 + 顶部标题 + 中段文字 |
| 222 | |
| 223 | - **Layout**: 顶部 height=120px 标题区，中段 height=200px 文字，底部 height=360px 全幅图 |
| 224 | - **Rendering × Palette**: `sketch-notes` × `macaron` |
| 225 | - **Image**: p06_bottom_img.png |
| 226 | - **Title**: 手绘速写 × 马卡龙 |
| 227 | - **Content**: 图在底部如舞台布景，文字浮于上方；温暖手绘感 |
| 228 | |
| 229 | #### Slide 07 — Z型图文交替三段蛇形 |
| 230 | |
| 231 | - **Layout**: 三行交替：图左文右 → 文左图右 → 图左文右，每段 height≈190px |
| 232 | - **Rendering × Palette**: `3d-isometric` × `tech-neon` |
| 233 | - **Image**: p07_z_img1.png, p07_z_img2.png |
| 234 | - **Title**: 等距3D × 霓虹科技 |
| 235 | - **Content**: Z型视线引导；两张等距3D图与三段文字交织排列 |
| 236 | |
| 237 | #### Slide 08 — 九宫格图文混排网格 |
| 238 | |
| 239 | - **Layout**: 3×3 grid，中心格放图，其余8格放文字/色块 |
| 240 | - **Rendering × Palette**: `blueprint` × `editorial-classic` |
| 241 | - **Image**: p08_grid_center.png |
| 242 | - **Title**: 蓝图技术 × 编辑经典 |
| 243 | - **Content**: 电路板图居中，周围8格填充标题、说明、标注等文字元素 |
| 244 | |
| 245 | #### Slide 09 — 圆形图像居中 + 四角文字放射 |
| 246 | |
| 247 | - **Layout**: 圆形裁切图居中 diameter=380px，四个角落各一文字块 |
| 248 | - **Rendering × Palette**: `digital-dashboard` × `mono-ink` |
| 249 | - **Image**: p09_circle_img.png (clipPath圆形裁切) |
| 250 | - **Title**: 数字仪表 × 墨黑单色 |
| 251 | - **Content**: 高科技仪表盘图像圆形展示，四角文字如标注向外发散 |
| 252 | |
| 253 | #### Slide 10 — 图作全幅底纹 + 文字信息密铺 |
| 254 | |
| 255 | - **Layout**: 图全幅平铺为背景，深色遮罩overlay，文字分四区域密铺 |
| 256 | - **Rendering × Palette**: `pixel-art` × `vivid-launch` |
| 257 | - **Image**: p10_bg_texture.png (hero_page) |
| 258 | - **Title**: 像素复古 × 活力发射 |
| 259 | - **Content**: 8-bit像素背景上铺设四块信息卡片，霓虹文字与像素感呼应 |
| 260 | |
| 261 | #### Slide 11 — 剪纸分层叠叠 + 文字嵌入各层 |
| 262 | |
| 263 | - **Layout**: 图全出血为剪纸背景，文字块嵌入各剪纸层之间 |
| 264 | - **Rendering × Palette**: `paper-cut` × `nature-organic` |
| 265 | - **Image**: p11_papercut.png (hero_page) |
| 266 | - **Title**: 剪纸艺术 × 自然有机 |
| 267 | - **Content**: 多层剪纸山景，文字分布于不同景深层，模拟纸层嵌字 |
| 268 | |
| 269 | #### Slide 12 — 竖版杂志：窄图占左20% + 大标题横排 |
| 270 | |
| 271 | - **Layout**: 左侧竖条图 width=256px，右侧大标题 + 正文占余下1024px |
| 272 | - **Rendering × Palette**: `vintage-poster` × `duotone` |
| 273 | - **Image**: p12_poster_img.png |
| 274 | - **Title**: 复古海报 × 双色调 |
| 275 | - **Content**: 窄竖图如书脊般立于左缘，右侧大号字排版如杂志封面 |
| 276 | |
| 277 | #### Slide 13 — 对角线分割：左上图，右下文 |
| 278 | |
| 279 | - **Layout**: 对角线切割，左上三角区域放图，右下三角区域放文字 |
| 280 | - **Rendering × Palette**: `fantasy-animation` × `sunset-gradient` |
| 281 | - **Image**: p13_diagonal_img.png |
| 282 | - **Title**: 奇幻动画 × 落日渐变 |
| 283 | - **Content**: 吉卜力风森林图占左上，文字在右下三角内排列；对角张力 |
| 284 | |
| 285 | #### Slide 14 — 图片褪色为底色 + 大字叠压 |
| 286 | |
| 287 | - **Layout**: 图全出血低饱和度处理，大字（font-size≈80px）直接叠压其上 |
| 288 | - **Rendering × Palette**: `ink-notes` × `earthy-dusty` |
| 289 | - **Image**: p14_fade_bg.png (hero_page，低饱和底图) |
| 290 | - **Title**: 水墨笔记 × 尘土大地 |
| 291 | - **Content**: 水墨山水褪为底色，单行超大字叠压；图为纹理，字为主角 |
| 292 | |
| 293 | #### Slide 15 — 上下各半：上段文字，下段图 |
| 294 | |
| 295 | - **Layout**: 上半 height=340px 文字区，下半 height=340px 全幅图（有细分割线） |
| 296 | - **Rendering × Palette**: `flat` × `jewel-tone` |
| 297 | - **Image**: p15_bottom_img.png |
| 298 | - **Title**: 扁平设计 × 宝石色调 |
| 299 | - **Content**: 上方大标题+正文，下方扁平俯视图；图文各占半幅，对等对话 |
| 300 | |
| 301 | #### Slide 16 — 中心大图 + 环绕一圈文字标注 |
| 302 | |
| 303 | - **Layout**: 正方形图居中 size=480×480，周围六个方向标注文字带指示线 |
| 304 | - **Rendering × Palette**: `minimalist-swiss` × `editorial-classic` |
| 305 | - **Image**: p16_center_img.png |
| 306 | - **Title**: 极简瑞士 × 编辑经典 |
| 307 | - **Content**: 包豪斯感极简图形居中，六条标注线向外辐射，文字像产品图解 |
| 308 | |
| 309 | #### Slide 17 — 窄条图片横贯中部 + 上下各一段文字 |
| 310 | |
| 311 | - **Layout**: 顶部文字区 height=200px，中部图条 height=240px，底部文字区 height=240px |
| 312 | - **Rendering × Palette**: `screen-print` × `vivid-launch` |
| 313 | - **Image**: p17_strip_img.png |
| 314 | - **Title**: 网版印刷 × 活力发射 |
| 315 | - **Content**: 丝网印刷风横条图贯穿页面中腰，上下文字各成一节，图将文切开 |
| 316 | |
| 317 | #### Slide 18 — 不规则多边形图像 + 文字填缝 |
| 318 | |
| 319 | - **Layout**: 六边形裁切图 (clipPath polygon) 居左偏，文字块填入右侧和角落空隙 |
| 320 | - **Rendering × Palette**: `nature` × `sunset-gradient` |
| 321 | - **Image**: p18_polygon_img.png (clipPath六边形裁切) |
| 322 | - **Title**: 自然插画 × 落日渐变 |
| 323 | - **Content**: 热带植物图以六边形呈现，文字在图形外围和角落自由填充 |
| 324 | |
| 325 | #### Slide 19 — 多图拼贴蒙太奇 + 大字压跨多图 |
| 326 | |
| 327 | - **Layout**: 三张图拼接平铺全幅，大号文字（font-size≈72px）横跨多图之上 |
| 328 | - **Rendering × Palette**: `editorial` × `dark-cinematic` |
| 329 | - **Image**: p19_collage1.png, p19_collage2.png, p19_collage3.png |
| 330 | - **Title**: 杂志编辑 × 暗黑影院 |
| 331 | - **Content**: 三张编辑摄影拼贴铺满页面，超大标题字横压其上；蒙太奇叙事 |
| 332 | |
| 333 | #### Slide 20 — 结尾：暗底反白 + 单句居中收场 |
| 334 | |
| 335 | - **Layout**: 图全出血黑板背景，单行文字绝对居中，页面留白≥60% |
| 336 | - **Rendering × Palette**: `chalkboard` × `mono-ink` |
| 337 | - **Image**: p20_closing.png (hero_page) |
| 338 | - **Title**: 黑板粉笔 × 墨黑单色 |
| 339 | - **Content**: 黑板星座底图，正中一句话收尾；负空间即内容 |
| 340 | |
| 341 | --- |
| 342 | |
| 343 | ## X. Speaker Notes Requirements |
| 344 | |
| 345 | - 文件命名与SVG对应：`01_cover.md` ↔ `01_cover.svg` |
| 346 | - 演讲时长：约15分钟 |
| 347 | - 备注风格：简洁说明，指出每页图文结合要点 |
| 348 | - 演示目的：展示（showcase） |
| 349 | |
| 350 | --- |
| 351 | |
| 352 | ## XI. Technical Constraints Reminder |
| 353 | |
| 354 | 1. viewBox: `0 0 1280 720` |
| 355 | 2. 背景用 `<rect>` |
| 356 | 3. 文字换行用 `<tspan>`，禁止 `<foreignObject>` |
| 357 | 4. 透明度默认用 `fill-opacity` / `stop-opacity`；`rgba()` 保持转换兼容 |
| 358 | 5. 禁止：`mask`, `<style>`, `class`, `foreignObject`, `textPath`, `animate*`, `script` |
| 359 | 6. 文字符号写原始 Unicode，禁止 HTML 实体（ — 等） |
| 360 | 7. `clipPath` 仅用于 `<image>` 裁切（P09圆形、P18六边形） |
| 361 | 8. 图标使用 `<use data-icon="tabler-outline/xxx"/>` 占位符 |
| 362 |