修复svg2pptx转换器多项bug + 新增管线兼容性文档

svg2pptx.py:
- 修复image opacity不生效(通过OOXML alphaModFix)
- 修复环形图stroke渐变url(#id)引用不支持(fallback第一个stop颜色)
- 修复viewBox内缩放不传递(g组scale累积到所有子元素)
- 修复text baseline偏移(区分text-after-edge和auto)
- 修复text-anchor:middle/end的x坐标偏移
- 添加--html-dir参数支持

html2svg.py:
- 修复图片相对路径解析(以HTML文件所在目录为基准)
- 新增3种CSS兜底预处理(background-clip:text、text-fill-color、mask-image)

新增 references/pipeline-compat.md:
- HTML->SVG->PPTX管线兼容性规则文档
- CSS禁止清单、防偏移写法指南、防偏移checklist
- 已整合到SKILL.md和prompts.md中引用

prompts.md:
- 新增内联SVG防偏移约束(禁SVG text、用HTML叠加)

示例产物:
- ppt-output/ 包含SU7示例的完整HTML/SVG/PPTX产物
This commit is contained in:
sunbigfly
2026-03-21 03:57:23 +08:00
parent 7dcfe25603
commit e860485ec8
27 changed files with 7914 additions and 56 deletions

View File

@@ -410,9 +410,10 @@
- 关键词: 用 <strong> 或 <span class="highlight"> 包裹(背景 accent-primary 10% 透明度)
### data数据卡片
- 核心数字: font-size=36-48px, font-weight=800, 使用 accent-primary 渐变色(background: linear-gradient; -webkit-background-clip 除外)
- SVG 友好替代: 直接用 color=accent-primary不要用 -webkit-background-clip: text
- 单位/标签: font-size=14-16px, color=text-secondary
- 核心数字: font-size=36-48px, font-weight=800, **直接用 `color: var(--accent-1)`**
- **禁止** `background-clip: text` + `-webkit-text-fill-color: transparent` 渐变文字SVG转换后变成橙色色块+白色文字)
- html2svg.py 有兜底自动修复,但会丢失渐变效果只保留主色
- 单位/标签: font-size=14-16px, color=text-secondary 或 color=accent-2
- 补充说明: font-size=13px, 在数字下方
### list列表卡片
@@ -520,7 +521,9 @@
**核心原则**:图片是**氛围的一部分**,不是独立的内容块。
#### 5 种融入技法(全部管线安全)
> **SVG 管线兼容警告**:所有渐隐/遮罩效果必须用 **真实 `<div>` 遮罩层** 实现(`linear-gradient` 背景的 div 叠加在图片上方)。**禁止使用 CSS `mask-image` / `-webkit-mask-image`**,该属性在 dom-to-svg 转换中完全丢失。html2svg.py 有兜底(自动降级为 opacity但效果远不如 div 遮罩精细。
#### 5 种融入技法(全部管线安全 -- 均使用 div 遮罩而非 mask-image
##### 1. 渐隐融合 -- 封面页/章节封面的首选
@@ -599,12 +602,25 @@
- 渐变遮罩用**真实 `<div>`**(禁用 ::before/::after
- `object-fit: cover``border-radius` 与容器一致
- 图片使用**绝对路径**(由 agent 生成图片后填入)
- 底层氛围图的 opacity 必须足够低0.05-0.15),尺寸限制在容器的 45-60%,避免遮挡前景内容
**禁止**
- 禁止使用 CSS `mask-image` / `-webkit-mask-image`SVG 转换后完全丢失,必须用 div 遮罩层替代)
- 禁止使用 `-webkit-background-clip: text`SVG 中渐变变色块,必须用 `color` 直接上色)
- 禁止使用 `-webkit-text-fill-color`SVG 不识别,必须用标准 `color` 属性)
- 禁止图片直接裸露在卡片角落(无融入效果)
- 禁止图片占据整个卡片且无蒙版(文字不可读)
- 禁止图片与背景色有明显的矩形边界线
#### 内联 SVG 防偏移约束(详见 `pipeline-compat.md` 第 2 章)
svg2pptx 对 SVG `<text>` 元素的 baseline/text-anchor 定位有精度损失(+/- 3-5px会导致文字标注在 PPTX 中偏移。以下规则从 HTML 源头避免偏移:
1. **内联 SVG 中禁止写 `<text>` 元素**。所有文字标注数据标注、x 轴标签、图例文字、环形图中心文字)必须用 HTML `<div>` / `<span>` 绝对定位叠加在 SVG 上方
2. **不同字号混排必须用 flex 独立元素**`display:flex; align-items:baseline; gap:4px`),禁止嵌套不同字号的 span
3. **环形图中心文字用 HTML position:absolute 叠加**,不写在 SVG `<text>`
4. **SVG circle 弧线用 `stroke-dasharray="弧长 间隔"` 两值格式**,禁止 `stroke-dashoffset`
## 对比度安全规则(必须遵守)
文字颜色必须与其直接背景形成足够对比度,否则用户看不清:
@@ -895,7 +911,7 @@ Step 3 -> 使用 Prompt #2大纲架构师
Step 4 -> 使用 Prompt #3内容分配与策划稿
Step 5a -> 使用 style-system.md 选择风格
Step 5b -> 如有 generate_image为每页生成配图
Step 5c -> 使用 Prompt #4HTML 设计稿),逐页生成
后处理 -> scripts/html_packager.py 合并预览 + scripts/html2svg.py 转 SVG
Step 5c -> 使用 Prompt #4HTML 设计稿),逐页生成。**必须遵守 `pipeline-compat.md` 中的 CSS 禁止清单和管线兼容性规则**
后处理 -> scripts/html_packager.py 合并预览 + scripts/html2svg.py 转 SVG + scripts/svg2pptx.py 转 PPTX
可选 -> 使用 Prompt #5演讲备注
```