前言

最近在开发基于 Vue + Vite 的在线思维导图项目 gimi-mind-map它支持节点编辑、主题样式、概要、外框、关系线、图片、XMind 导入导出，还有 PNGJPEGPDFSVG 多种格式导出。

项目链接：

• Git 仓库：
• 在线演示这方面，GimiMind 思维导图

这篇文章聚焦一个主要痛点：mind‑map 导出 SVG 时如何保证文字在不同环境中保持原始外观。

常见痛点速览

• 编辑器里字体正常，导出的 SVG 打开后自动切换为默认字体。
• 节点文字原本自动换行，导出后全部跑到一行导致节点宽高失衡。说起来，
• 关系线上的文字位置偏移。连线与文字失去对应，
• 概要/外框标题与节点文字对不齐。
• 在浏览器还能接受，但放到设计软件、图片查看器或后端转图服务里就出现严重变形。

调整目标

一次思维导图导出文字转 Path 的实战调整方法

先看两种实现方式对比

@font-face 方案：

• 主要思路：保留文本。在 SVG 中声明字体，让打开时自行加载。怎么说呢，
• 优点：实现简单、文件体积小、文字可复制/编辑。话说回来，
• 缺点：依赖外部字体资源。离线或跨软件时容易失效，引发文字宽度变化和换行错位。

Text‑to‑Path 方案：

• 主要思路：在导出前把每个字符轮廓转换为 ,固化为几何图形。按理说，
• 优点：跨环境显示稳定。完全摆脱字体依赖，适合分享、存档、后端渲染等场景。其实，
• 缺点：T​ext不可编辑/复制。文件体积增大，需额外处理粗体/斜体等样式补偿。

问题是怎么出现的？

SNS 思维导图的 SVG 包含多种文字场景：

• #font-family#
• #font-size#
• #font-weight#
• #font-style#
• #line-height#
• #节点宽度# 与 #自动换行#
• #transform 缩放和平移#
• #foreignObject# 中的 HTML 排版
• #SVG 原生 的字符定位

The old implementation simply injects a 中心主题

中心主题

优点概述

• Coding effort minimal.
• Saves bandwidth – file size stays small.
• The text remains selectable,searchable and editable.
• Adequate for modern browsers where referenced fonts are reachable.

缺陷剖析

依赖外部网络资源；其实，离线或网络异常时会直接掉字。 不同软件对 @font-face 支持程度参差不齐。 foreignObject 在部分渲染引擎中兼容性差。 最致命：字体替换后字符宽度变化，引起自动换行失效 → 节点尺寸错位。

从新方案来看，Text‑to‑Path 实现细节

The new workflow freezes every character’s outline into an SVG path before exporting.

This eliminates any reliance on external fonts at runtime – viewer only needs to render geometric paths.

整体流程概览

1. Clone current canvas .
2. Insert background / recalc export dimensions.
3. Call convertExportTextToPath) . / code> – this is where all text becomes path.
4. Serialize outerHTML → final SVG file.

关键技术拆解

1️⃣ 字体映射与加载

js const FONT_URLS = { audiowide: '/static/font-family/Audiowide-Regular.ttf'。allseto : '/static/font-family/cjkFonts-allseto.ttf',nevermind:'/static/font-family/NeverMind-Regular.ttf',//…more ，}

The strategy is deliberate:

2️⃣ 字体加载

js async function loadFont{ const fontName = normalizeFontName;if return null;if){ fontCache.set(fontName,fetch .n throw new Error;return r.arrayBuffer;}) .n) )，} return {fontName,font: await fontCache.get};}

Caching ensures a single network request per font even when hundreds of nodes use it.

3️⃣ 文本选择器区分

js const TEXT_SELECTOR = '.node-text-description。.node-summary-description,.node-serial-numner p,.out-border-desc-input';const SVG_TEXT_SELECTOR = '.mind-map-relationbox text';

`foreignObject`‑based HTML text uses Range API;native `` uses `getStartPositionOfChar` etc.

4️⃣ 字体栈解析与缺字检测

js function parseFontFamilyNames{return String.split.map.replace.toLowerCase).filter;} function getFontStack{return Array.from.filter))} function hasGlyph{return g && g.index!==undefined && g.name!=='.notdef'，}

If no glyph is found across our controlled fonts,conversion is skipped and original text is kept as a fallback – 娱乐ter than rendering a mysterious square.

5️⃣ 获取浏览器真实排版

js function getCharRects{ const txtNode = getTextContentNode;const chars=; 其实，for{ const ch=txtNode.data;if{chars.push;其实，continue，} const range=document.createRange;range.setStart;range.setEnd;const rect=range.getClientRects;if chars.push;} return chars;}

This leverages browser’s layout engine—no need to reinvent line‑break logic.

6️⃣ 行分组 & Baseline 计算

js function groupByLine{ const lines=;let cur=，for{ const c=chars;if>lineThreshold){ if lines.push;cur=，} cur.push;说起来，} if lines.push;return lines;}

The baseline for each line is derived from `opentype` metrics combined with CSS `line-height` to guarantee vertical alignment identical to what users see in editor.

7️⃣ 屏幕坐标 → SVG 本地坐标转换

js function screenToSvg{ const m = el.getScreenCTM;说起来，if return {x,y};const pt = el.ownerSVGElement.createSVGPoint;pt.x=x，pt.y=y;return pt.matrixTransform);}

This step neutralizes any canvas zoom/pan transforms so that generated paths land exactly where original text was placed.

8️⃣ Path Generation

js let pathData='';lineChars.forEach(item=>{ const {x,y}=screenToSvg;const glyphPath = font.getPath;pathData+=glyphPath.toPathData;// keep two decimal places for reasonable size/precision balance });

The resulting `` is inserted into a `` and replaces original `` or `` element.

9️⃣ 粗体 / 斜体 补偿处理

js if){ path.setAttribute;path.setAttribute);} if){ const skew=-0.25;// approximate italic angle path.setAttribute`);}

A visual stroke mimics true bold weight,while a matrix skew approximates italics when an actual italic font file isn’t available.

10️⃣ 下划线 / 删除线 手动绘制

js if){ drawLine;} if){ drawLine;}

总入口函数

js export async function convertExportTextToPath{ // HTML based texts for)){ try{ await convertElementToPath;}catch{console.warn;} } // Native SVG texts for)){ try{ await convertSvgTextToPath;}catch{console.warn;} } }

If a single node fails,it won’t abort whole export – a crucial robustness feature for large mind maps.

新方案的优势

• No external‑font dependency: Works offline,in design tools,or on backend rendering services.
• No @font-face compatibility worries: Even software that ignores embedded CSS will still display correctly because everything is geometry.
• Certain line‑break fidelity: Because we read browser’s actual layout before conversion。automatic wrapping stays exactly as users saw while editing.
• Diverse style support: Bold,italic,underline and strikethrough are visually preserved via stroke / transform tricks.
• Smooth integration with existing export pipeline: Conversion happens on a cloned DOM tree – editors remain fully editable after export.
<\/ul>

新方案的局限性

• Slightly larger SVG files。​​​​​​​​​​​​​​ ‍‍‍‍‍‍‍‍‍ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ​​ ​​ ​​​​ ​​​​​ ​​​​​​​ ​​​​  ​ ​ ​ ​​
  some hidden whitespace due to formatting issues above but not relevant\ ​ ​ ​​

  Conclusion

  The **Text‑to‑Path** strategy turns an often‑overlooked typography bug into a predictable export artifact:

  • Editor side – Text remains editable because conversion runs on a cloned copy.
  • Export side – All visual characteristics are baked into paths。guaranteeing pixel‑perfect consistency wherever file lands.

  If your product’s primary export target is sharing / archiving / server‑side rasterization,this trade‑off pays off handsomely by eliminating dreaded “字变形” nightmare that many users experience.

  Conversely,if you need post‑export editing,stick with @font‑face and ensure your users have reliable network access to bundled fonts.

  Eir way,understanding where problem originates— reliance on external fonts—and applying an appropriate fix will spare you countless support tickets about “为什么我的思维导图打开后字乱了”。话说回来，