SVG 图形模板速查
8 类 · 复制即用
八类常用示意图
示意图优先用内联 SVG 生成：零素材、矢量任意放大、改 HTML 即改图、批量重渲风格 100% 一致。下面是八类可直接复制的模板。
① 流程步骤 · process
4 个圆角方块 + 箭头。超过 5 步建议拆成两行。
图 · 流程步骤：线性推进，强调顺序不可逆
② 时间轴 · timeline
竖轴 + 圆点。节点超过 6 个就用横向或分页。
图 · 时间轴：竖轴叙事，节点间距保持一致
③ 对比条 · comparison
两项对比最清晰；条形长度 = 数值，务必标注具体数字。
图 · 对比条：同一指标上下并置，差异一眼可见
④ 漏斗 · funnel
上宽下窄，层高一致；颜色越深代表越接近转化。
图 · 漏斗：深色层放最终转化，视线自然落到重点
⑤ 循环图 · cycle
四节点环形，箭头沿圆弧；强调「回到起点」而非线性结束。
⑥ 金字塔层级 · pyramid
顶层最窄也最重要 → 用强调色；底层最宽是基础支撑。
图 · 金字塔：视觉重量即重要程度，别把最大块放顶部
⑦ 环形占比 · donut
半径 75 / 周长 471.24；改占比就重算 dasharray 与 dashoffset。
图 · 环形占比：占比超 5 类就改横向条形，别堆色块
⑧ 2×2 矩阵 · matrix
两个维度切四象限；每格写「是什么 + 怎么做」两行。
图 · 2×2 矩阵：决策类内容最强图形，两轴必须标明方向
改图三步：① 复制整块 <div class="mz-fig"> 到你的卡片；② 改文案与数值（对比条/漏斗/环形要同步改数字与长度）；③ 配色只动 hex，主强调保持 #B5523A 一个色，其余用中性暖灰。