CAD图纸粘贴到TinyMCE的矢量输出方案与实现

芯片制造企业里有个场景，我这两年见过不止一次：工程变更单（ECN）、不合格品报告（NCR）、设备维护记录，这些质量体系文档跑在网页端 OA 或文档管理系统里，编辑器用的 TinyMCE。工程师按 Ctrl+V，把 CAD 里复制好的封装图、版图局部或者装配图贴进去，交给文档系统归档。问题就在这一步——贴进去的图变成了一张位图。

位图不是不能看，而是芯片行业太吃精度。你贴一块键合手指的局部放大图，评审会上放大两倍，线条边缘的锯齿就出来了；再过一段时间做追溯，系统里那张图里如果还夹杂着 CAD 图层信息的一部分丢失、图纸尺寸比例失准，问题就严重了。真正的麻烦在于，粘贴这个动作把“可交互的工程数据”降级成了“一张死的照片”。数据变更、可检索性、原始矢量信息，全部被剪掉。

围绕“Cad 图纸粘贴到 TinyMCE 后如何输出矢量”这个问题，企业无非两条路：回到源头改造 CAD 侧的复制流程，或者在 TinyMCE 编辑器里做一层自定义的粘贴拦截。两条路我都实际趟过，本篇把思路、代码要点和踩过的坑完整梳理一遍。内容面向芯片制造企业的 IT/工艺工程师、系统集成商、希望在自己的平台中实现“CAD 矢量进编辑器”的技术人员。

1. 问题拆解：CAD 图纸粘贴到编辑器之后，矢量数据都去了哪里？

1.1 从 Ctrl+C 到 Ctrl+V，剪贴板里到底装了什么

要解决“粘贴成位图”的问题，先得搞明白 CAD 软件复制对象时，剪贴板里放的是什么。AutoCAD、Altium Designer、Cadence Allegro，它们的复制命令会把对象写入 Windows 剪贴板，而且往往是多种格式同时写入：原生 CAD 格式（供同种软件内部粘贴用）、EMF 图元文件、DIB/PNG 位图、还有一部分软件会携带 SVG 或 PDF 渲染数据。

但浏览器截获 Ctrl+V 时，不会把剪贴板所有格式都交给你。Chromium 内核出于安全策略，默认只向网页暴露非常有限的几种 MIME 类型，平时最常用的是 image/png，有些情况会给 text/html 和 text/plain。也就是说，浏览器拿到的那一份图形数据，已经是被 CAD 软件做了一轮“降格”处理后的位图。CAD 软件把图元渲染成 PNG 的时候，默认的分辨率又不会高到哪去，线条和填充被栅格化，这就是粘贴结果变糊、变虚、无法放大的根本原因。

所以“矢量输出”问题被拆开看，实际分成两层：

• 第一层，剪贴板里是否有矢量数据可供浏览器读取；
• 第二层，即便浏览器能拿到矢量数据，TinyMCE 的内容过滤规则是否允许它原样保留。

再往下推一层，即使我们绕开剪贴板，通过文件拖拽或者“从系统内部选择 CAD 参考图”的方式，把 SVG 放进 TinyMCE，编辑器的 valid_elements、paste 过滤插件也会对标签做一轮清洗。一个 SVG 里通常带 <svg>、<path>、<polyline>、<text>、<g> 等标签，还带有许多 transform、fill-rule 属性，默认情况下一轮清洗下来，图形不完整是常有的事。

1.2 芯片制造场景的粘贴场景，比普通办公文档更苛刻

普通制造企业的 CAD 粘贴，可能只是为了放一张示意图，位图分辨率差不多够用。芯片企业则不行，典型的粘贴内容有这么几类：

第一类是封装相关图纸，比如引线框架图、基板布线图、封装外形图。里面存在大量微小的尺寸标注、焊盘坐标、引脚编号，一个引脚的间距可能只有 0.5mm，粘贴后若没有矢量数据，评审人员就没法在图纸上做精确测量，更没法用浏览器的放大去看局部细节。

第二类是晶圆制造端的版图图片，通常在 CAD 工具或版图工具里截取局部。版图数据量大，一整层金属走线的 GDS 数据动辄几十 MB，不可能整块贴进 TinyMCE，所以工程师会复制一个局部视图。局部视图里同时有图形几何和设计规则标注，粘贴后如果标注叠在图形上成了无法分离的一整层像素，后面想按图层去找信息，就完全做不到。

第三类是设备零部件图和装配图，常见于设备工程部门。这些图纸往往需要做标注、批注，最后形成的文档要归档到质量体系里，将来需要跟原 CAD 文件做关联追溯。若粘贴进去的位图和原始 CAD 文件之间没有可追溯的数据关联，文档审核时就要花大量时间去核对“这图是不是最新版本”。

一句话总结：芯片制造场景里，CAD 图纸粘贴到 TinyMCE，不只是视觉问题，还是数据保真度、可追溯性、精度合规三重问题。

2. 矢量输出方案选型：粘贴拦截、CAD 侧导出、还是企业绘图服务

2.1 三条技术路线的对比

要解决“粘贴后仍是矢量”的问题，不是只有一条路。我在实际项目里梳理并验证过三条可行路线：

路线 A：浏览器粘贴拦截。在 TinyMCE 的 paste 事件里做自定义逻辑，当检测到剪贴板里有 SVG 或 EMF 数据时，读取原始数据并把 SVG 写入编辑器，而不是让浏览器默认生成 <img src="data:image/png...">。

路线 B：CAD 软件侧改造。给工程师提供一个专门的“复制到文档系统”按钮，点击时 CAD 插件负责把选中对象导出成一个精简的 SVG 文件，同时把单位、比例、图层信息写成一段 JSON，然后通过接口推送到 TinyMCE 编辑器的后端草稿箱，工程师在 TinyMCE 里点击插入。

路线 C：企业绘图服务。在 TinyMCE 和后端之间加一层绘图服务，粘贴位图后先不落库，而是把位图发给服务端，服务端用光栅矢量化算法做一次从位图到 SVG 的转换。但位图矢量化对工程图效果佳，对包含复杂填充颜色、渐变色的实景渲染图并不理想，芯片图纸若多为单色线条图，效果尚可。

三条路线对比起来，方案 B 从数据源头上保证了矢量属性和原始工程语义，适合正式的变更单场景，但它要求 CAD 端装插件，推广面受限；方案 A 不额外增加 CAD 软件负担，但你得想办法让剪贴板里真的出现 SVG 数据，现实操作中，像 Altium 这类软件复制时只写 EMF 和位图，浏览器侧很难直接读取到矢量；方案 C 对操作最友好，但转换复杂图纸时会丢失少量图层信息。

2.2 芯片企业推荐用的组合方案

基于我对几家半导体封装厂、晶圆设备厂商的文档流程观察，生产系统里最靠谱的组合不是单一路线，而是 A+B 混合：

工程变更正式环节走 CAD 插件推送矢量图，确保源头数据完整；日常会议记录或临时方案讨论，工程师仍然可以自由 Ctrl+V 粘贴位图作为辅助参考。但默认的粘贴行为要做一次改造——粘贴源是 CAD 软件时，系统给用户弹一个提示：“检测到您粘贴的是位图，建议使用工程图形插入按钮以确保矢量精度”，引导用户切到合规流程。

这样做的好处很直接：正式受控文档永远不会出现栅格化的工程图纸，日常讨论又不损失便利性。下面我把两条路线的技术实现拆开来讲。

3. CAD 侧矢量导出流程：从 DWG/PCB 到 SVG 的实操路径

作为核心基础设施，CAD 软件侧导出的 SVG 质量决定后续使用效果。团队在实施中优先保证导出流程简便且结果稳定。

3.1 各 CAD 软件的矢量导出差异

CAD 工具五花八门，芯片部门常见的软件大致分四类：

AutoCAD 为主的机械图纸。AutoCAD 从 2016 版本开始支持 PLOT 命令直接输出 PDF，再由后端工具从 PDF 中提取矢量路径，也可以利用 AutoCAD 插件调用 ExportToSVG 或者通过 ActiveX API 读取实体的几何数据自行生成 SVG，第二者对二次开发人员更友好。导出时最要紧的是设定统一的 DXF/DWG 单位，避免 1:1 输出时 mm 和 inch 混淆。

Altium Designer / Allegro 之类的 PCB 设计工具。这类软件更麻烦，因为 PCB 图里大量铜箔填充区域和焊盘叠层，直接导出 SVG 可能出现填充区域缺失。Allegro 推荐把需要表达的对象先做一层 Artwork 输出，用 Gerber 格式做中转，再转换 SVG；Altium 则可直接输出 PDF，但要把 PDF 的线宽设置和字体嵌入项一并处理。

Cadence Virtuoso / Synopsys 这类版图工具。版图层级深，形状以多边形为主，通常先导出 GDSII 或 OASIS，再用 gdstk、klayout 这类工具链把目标 layer 转成普通几何路径，再映射为 SVG。实际操作中，我不建议从全版图导出的 GDS 直接转换，数据量太大且浏览器根本渲染不动，正确做法是在版图工具里先裁剪出当前视图的几何对象，再走导出流程。

SolidWorks / Inventor 这类三维机械软件。复制到工程图后，应该投影导出二维工程图，再按 AutoCAD 的方式转 SVG。直接截取三维视图输出 BMP，往往数据量大、填充复杂，不满足矢量需求。

3.2 后端转换服务的核心步骤

我们做了一个内部叫 “SVG Bridge” 的服务，输入是 CAD 软件上传的文件，输出是精简后的 SVG。服务端处理步骤大致如下：

第一步，格式归一。上传的 DWG、DXF、PDF、Gerber 文件，分别走对应的解析库。Python 技术栈中，DWG 解析可以使用 ezdxf 读取 DXF，较新的 DXF 用起来相对顺手；AutoCAD 的 DWG 原格式解析受限，稳妥方案是先在 CAD 客户端用 Script 命令另存为 DXF 再上传。PDF 用 pdf2svg 直接转换。Gerber 文件用 gerbv 或 pygerber 解析几何层。

第二步，几何清理。CAD 原始数据里大量存在重复线段、零长度线段、重叠多边形；直接用 SVG 输出会导致 path 数量和字节数爆炸。建议在转换层做一次几何合并：把共线的线段合并成一条长线段；把相邻多边形通过布尔并集运算合并；删除面积小于阈值（按导出比例尺确定）的微小碎片。这个清理环节能减少约 60%~80% 的节点数。

第三步，坐标映射。原图坐标可能是毫米，也可能微米。芯片级版图常常直接用微米，而 SVG 默认无单位，在浏览器里实际按像素渲染。若一比一硬怼，一个 1mm 的焊盘会渲染成 1px 的大小，眼睛根本看不见。所以要做统一的缩放映射，同时把原始单位写进 SVG 的 <metadata>，内部约定：1 SVG 单位 = 1 微米，这就是标准比例。图纸另成比例时在根节点加 vector-effect 控制和全局 transform，让图纸在编辑器的显示初始比例可控。

第四步，图层映射。原始文件里的图层名通常有业务含义，如 TOP_SOLDER、BOND_PAD、FABRICATION。SVG 里每个图层对应一个 <g id="layer:...">，做好转换后，后续的标签调用和图层显隐就方便了。

第五步，字体处理。图纸上的标注字符，在 PDF 或 DXF 里可能引用特殊字体，像中文的仿宋、西文的 AIGDT。转换 SVG 时所有字符都要转 <path> 而不是保留 <text>，否则换一台没装字体的电脑，标注直接变方块。芯片企业图纸里有大量公差符号和特殊字符，更要格外注意。

3.3 SVG Bridge 的一个关键设计：单位元数据

在芯片制造氛围里做 SVG 输出，我最重视的是单位。文档系统后续拿到 SVG 后，如果想做像素级测量或对接检验设备，必须知道该图一单位等于多少微米。

在 SVG 的 <metadata> 里写一段 XML 是稳定的做法：

xml复制<metadata>
  <cad:source xmlns:cad="http://cad.example.com/svg-metadata" units="um" scale="0.125" original="board_a_v12.dxf" layer-count="6" content-version="2.1" />
</metadata>

后端接口返回 SVG 时，再把这个 metadata 解析出来，连同 CAD 原始文件的版本号、上传人、上传时间一并存进数据库。编辑器加载 SVG 时不解析这段信息，但文档管理系统审计追溯时可以直接调取。别小看这一步，后期 MES/质量系统想从图纸上抓取 Bond pad 坐标做自动比对，靠的就是这段元数据。

4. TinyMCE 侧改造：粘贴拦截、自定义插件和 SVG 渲染

CAD 侧的 SVGBridge 服务能在后台自动把 DXF/PDF/Gerber 转换成矢量 SVG 文件，并通过插件调用插入。但还有大量工程师直接 Ctrl+V 粘贴 CAD 内容，此时 TinyMCE 侧也需要插件能力。该方向需要涵盖：粘贴事件拦截、读取剪贴板格式、用自定义插件替换默认行为、以及配置 TinyMCE 避免 SVG 被过滤破坏。

4.1 用 paste 事件拦截“伪粘贴”

首先明确一点：受浏览器限制，大多数 CAD 软件 Ctrl+C 复制的内容到浏览器里能读取到的只是位图，但少数软件（比如已做定制、或复制时同时写 HTML 片段）会把 SVG 放进 text/html 中。如果复制源是我们自家 CAD 插件，那么剪贴板里写入的 text/html 可以直接携带内嵌 SVG 片段。

接下来，拦截 Ctrl+V 粘贴行为。TinyMCE 允许通过注册一个自定义插件并在插件初始阶段增加事件监听来覆盖默认处理（不同版本的 API 形式有差异，但思路一致）。核心逻辑：

javascript复制editor.on('PastePreProcess', function (e) {
  if (!e.clipboardData) return;
  const html = e.clipboardData.getData('text/html') || '';
  const svgMatch = html.match(/<svg[\s\S]*?<\/svg>/i);
  if (svgMatch) {
    const clone = svgCleaner(svgMatch[0]);
    e.content = clone;   // 用 SVG 内容替换默认生成的位图 content
  } else {
    // 无矢量数据，记录日志并提示用户
    editor.notificationManager.open({
      text: '当前剪贴板中未检测到矢量图，建议使用 CAD 工程图形插入按钮以保留精度',
      type: 'warning'
    });
  }
});

这种做法让在 CAD 侧或浏览器辅助插件中有矢量数据来源的流程能直接粘贴到编辑器里。要注意：Chrome 对 PastePreProcess 里访问 clipboardData 有权限条件，在 http 非安全上下文中没有 clipboardData；企业内网通常用 https 或者本地 localhost 即可读取。即使拿不到 clipboardData，事件里 e.content 也能拿到 TinyMCE 默认转换后的 HTML，再做正则替换。

4.2 TinyMCE 自定义插件：AST 过滤与 SVG 白名单

将 SVG 放入 TinyMCE，会碰到一个基础问题：TinyMCE 自带的 xss_schema 或配置的 valid_elements 会过滤掉 <svg>、<path> 等标签内容。配置项在 TinyMCE 4/5/6 中形式不同，但核心思路都是向白名单中添加 SVG 相关元素。

推荐在插件中用 editor.schema 注册元素：

javascript复制editor.ui.registry.addButton('insertcadvector', {
  icon: 'image',
  tooltip: '插入 CAD 矢量图',
  onAction: function () {
    editor.windowManager.open({
      title: '插入 CAD 矢量文件',
      body: {
        type: 'panel',
        items: [{
          type: 'dropzone',
          name: 'cadfile',
          label: '拖拽 SVG 或 DXF 文件'
        }]
      },
      onSubmit: function (api) {
        var file = api.getData().cadfile;
        uploadCadFile(file).then(function (svgContent) {
          editor.insertContent(svgContent);
        });
        api.close();
      }
    });
  }
});

TinyMCE 官方 paste 插件的 preprocess 方法会整段清洗 HTML，最好将自己的插件 priority 调高，并把处理放在 preprocess 之前。一个比较省心的做法是：SVG 不进 TinyMCE 的可编辑内容区，而是作为整体组件嵌入。比如用 editor.insertContent('<div class="cad-embed" data-cad-id="...">' + svg + '</div>')，同时设置 content_css 里 .cad-embed svg { pointer-events: none; max-width: 100%; }，这样过滤规则通常将 .cad-embed 视为一个完整锚点，不会进入到内部对 <path> 逐项过滤。

如果过滤规则把内容吃掉了，备选处理方案是把 SVG 内容放到 <img src="data:image/svg+xml;base64,...">。这样 TinyMCE 会把它当作普通图像处理，浏览器渲染出来也是 SVG 矢量效果，但劣势是图像之外无法继续对 SVG 内部节点做交互操作。芯片企业的工程图通常不需要在 TinyMCE 内部改节点，需要矢量主要用于高倍缩放、打印和后续数据接入，base64 方案在某些场景反而是能满足用户需求的最快速方案。

但我个人强烈建议：正式文档采用完整 SVG 内嵌，并在提交后端时读取 SVG 字符串，做格式校验和元数据解析。理由很简单——评审文件时需要点击图内某一块焊盘去看关联信息，内嵌完整 SVG 可通过浏览器 DOM 操作直接绑定事件，而使用 img base64 就无法绑定细节交互了。

4.3 常用配置完整示例

在 TinyMCE 初始化时，除了默认 toolbar 配置，还要加上以下关键项，避免后续 SVG 入内容区被无端修改：

javascript复制tinymce.init({
  selector: '#doc-editor',
  plugins: 'paste insertcadvector',
  toolbar: 'undo redo | insertcadvector | paste',
  paste_data_images: true,
  paste_as_text: false,
  valid_elements: '-img,-svg,-path,-g,-polyline,-polygon,-circle,-text,-tspan,-use,-defs',
  extended_valid_elements: 'svg[*],path[*],g[*],polyline[*],polygon[*],circle[*],text[*],tspan[*],metadata[*],defs[*],radialGradient[*],linearGradient[*],desc[*]',
  content_style: 'svg { max-width: 100%; height: auto; }',
  setup: function (editor) {
    editor.on('PastePreProcess', function (e) {
      // 自定义逻辑 ...
    });
  }
});

配置里 valid_elements 是特殊写法，表示我们要保留 SVG 相关标签，用于与 xss_schema 共存；extended_valid_elements 中的 [*] 则尽量允许所有属性。生产环境中还需要进一步做属性白名单，特别是在多租户共享文档系统的场景，防止有人通过 <script> 或 <foreignObject> 偷偷注入脚本。SVG 本质是 XML，能承载 <script> 标签，因此我在服务端对上传的 SVG 也做了一层清洗，只保留白名单标签，其他一律移除；例如 <foreignObject> 通常用于嵌入 HTML，业务场景不需要，直接去掉。

5. 粘贴后处理与渲染精度的进一步优化

内容进入了编辑器，只完成了部署的一半。从矢量输出到最终能在浏览器里清晰查看，还需要处理几个常见问题。

5.1 矢量尺寸过大的渲染策略

芯片版图全层粘贴进来的 SVG 动辄几万到几十万个 path 节点。浏览器不是 CAD 渲染引擎，一次性把所有 path 塞进 DOM，页面会卡顿到不可用。处理办法是把图纸分层懒加载：第一版只渲染最大外框和主要锚点图形，用户点击“加载全部图层”时才发送请求获取剩余图层。

在 TinyMCE 中实现懒加载的惯用方案是给完整 SVG 的每个图层设置 data-src，让 svg 内仅渲染必要的 preview 节点。后端保存时也做了两步——小体积 preview SVG 和大体积原始 SVG。评审文档时默认加载小体积，点击图上的“查看矢量细节”再替换成完整 SVG。实测有效路径将 5 万节点 SVG 的初始渲染时间从 8 秒拉低到 1 秒左右。

5.2 保留 CAD 图层并提供显隐控制

以 SVGBridge 服务产出的 SVG 为例，每个图层已经包好 <g id="layer:...">。在 TinyMCE 嵌入的容器外层，我加了一个“图层控制”小图标，点击后展开图层的 checkbox 列表。通过操作 SVG 内 <g> 的 display，实现工程文档上查看特定层叠效果。

实现思路是在编辑器的 onChange 阶段加一个代理 handler，使用事件委托监听文档容器上 click 等动作，再查找到内部 svg 节点对应图层执行显隐：

javascript复制document.querySelector('.cad-embed').addEventListener('click', function (e) {
  if (e.target && e.target.matches('[data-toggle-layer]')) {
    var layerId = e.target.getAttribute('data-toggle-layer');
    var svgLayer = svgDom.querySelector('g[id="layer:' + layerId + '"]');
    if (svgLayer) {
      svgLayer.style.display = svgLayer.style.display === 'none' ? '' : 'none';
    }
  }
});

TinyMCE 在初始化后内部还有自己的 DOM 绑定系统，别直接把事件绑在 svg 内的小元素上，否则后续编辑导致文档 reflow 时，绑定关系容易丢失。事件绑在容器外层是最省心的。

5.3 图层叠加与对象命中测试

有工程师期望在浏览器端对 Bond Pad 做点击选中以查看关联数据库信息，这比想象中棘手——SVG 中图层之间互相遮盖，鼠标点击的目标可能命中上层填充区域而非下层。现在可行的方案是通过 elementFromPoint 获取最上层元素，然后把上层设置为 pointer-events: none 并递归其显示的图层。这是个纯前端技法，但落到芯片图纸的复杂程度时还是建议在一个关键图层上用“高亮边线 + 点击搜索最近对象”作为折衷，避免性能堪忧，复杂度也可控。

5.4 图片打印与 PDF 导出时的矢量保真

很多芯片企业做完文档后还要走打印签字和归档。浏览器默认打印 SVG 通常是矢量输出，PDF 打印机才保留 SVG 的矢量性——前提是 SVG 内不要包含外部引用的位图。工程图经转换后往往残留了少量公司 logo 或封装的预览小位图，导致整张图在打印时被分解成多层栅格。

打印导出前，我通常在系统里额外生成一次“纯矢量验收单”，凡含位图的在页面上提示“图纸包含位图元素，打印可能存在分辨率问题”，要求操作者用 CAD 侧导出全矢量版本替换。芯片行业打印纸是 A3/A4，矢量图纸转 PDF 无论怎么缩放都清晰；如果任凭位图混进去，放大打印时边线就是毛刺，专业评审观感很差。

6. 常见问题与排查实录

6.1 粘贴后 SVG 变成了空白

通常原因有两个：TinyMCE 的 schema 里 SVG 未纳入白名单，后端在内容清洗时将 <svg> 整段丢弃；或者前端从剪贴板里读出的 HTML 并不是完整 SVG，而是被浏览器做了修正。

排查时先不经过 TinyMCE，直接在浏览器控制台执行 clipboardData.getData('text/html') 验证数据是否存在完整 <svg>。如果 HTML 存在而 TinyMCE 里丢失，把 extended_valid_elements 配好即可。若连原始 HTML 里都没有 <svg>，则需要回 CAD 插件侧检查序列化，部分 CAD 软件导出 SVG 字符串时会在开头丢 xml 声明或者在外层套上 <html> 头，需要在粘贴拦截时“剥壳”。

6.2 EMF 格式不显示

用过 Altium Designer 或老一点版本 Allegro 的工程师，复制到剪贴板时往往主要格式是 EMF。Windows 上浏览器对 EMF 读取限制很高，Chromium 默认会把 EMF 转成位图后再让网页消费，导致矢量信息彻底丢失。

最理想方案是 CAD 侧插件同时写一份 SVG 分支到剪贴板；若无法改插件，可以在用户机器上安装一个小型托盘程序，监听剪贴板变化，发现 EMF 数据时自动调用矢量转换器，并把生成的 SVG 再写回剪贴板。这个思路我们在个别机台验证过，自动化的可靠性尚可，但在企业大规模部署前要考虑剪贴板内数据被反复改写可能造成其他软件粘贴异常的风险，必须做白名单匹配，只对特定 CAD 进程的复制做干预。

6.3 CAD 原文件里有块参照导致图形比例异常

AutoCAD 中块（Block）和动态块的坐标缩放容易在导出时被漏掉。如果你发现粘贴进 TinyMCE 的图形里某些实体位置偏移或者比例不对，先在 DXF 解析阶段检查块的 INSERT 实体是否采用了非等比缩放。ezdxf 在 query 块实体时能拿到 insert.xscale, insert.yscale 等属性，如果没有把这些值递归应用到块内实体的坐标上，最终显示必然错位。

针对这一问题，我在后端的导出转换里写了个递归展开器，处理逻辑分三步：对 INSERT 引用的块定义做深度克隆；克隆实体乘以变换矩阵的缩放系数；对多级嵌套块重复执行，直到没有块引用。转换后的 SVG 经过几个典型板卡图纸验证，线框位置精确到了微米级，保证评审测量准确性。

6.4 粘贴后线条粗细变成了千篇一律

CAD 图纸的相线有不同线宽语义，如中心线是细点画线、剖面外轮廓更粗。SVG 中每个 <path> 如果都只给 fill="none" stroke="black" stroke-width="1"，图面虽完整但层次感很差，甚至误导看图人。

处理方式是导出时以 CAD 图层的线宽属性映射成 SVG 的 stroke-width，遇 BYLAYER 则读取 layer 表里的默认线宽。更进一步的技巧是使用 vector-effect="non-scaling-stroke"，保证放大图元时线宽不随缩放变化，兼顾审美与标注习惯。芯片企业用于评审的图纸，通常线宽映射上采用固定像素值方案，不随 viewBox 设置而变化，视觉上更接近原始 CAD 软件显示效果。

6.5 大 SVG 导致编辑器输入卡顿

TinyMCE 对超大内容更新频繁做 DOM diff，就会导致输入一个字符卡顿半秒。遇到这种情况不要试图去优化 TinyMCE 的 diff 算法，而是引入组件的概念：TinyMCE 内容中代表一段大型 SVG 的节点只保留一个 <div> 壳，壳内 SVG 不为编辑器 content 的一部分，而是由我们自己的组件框架接管渲染。

进一步地，可以设置 editor.editorManager 中 forced_root_block 以防块级拆分，并在小型 SVG 中以文本块避免拆分，防止编辑时 SVG 内容被分成多个块元素后导致部分几何丢失。

7. 落地项目的几点总结与实际心得

调试完整个流程已有数月，在多家工厂试运行过程中，我从一开始的期望值过高到现在对前后端边界有了更清楚的认知。

第一，不要指望全自动做到 100% 保真。CAD 数据进入浏览器本质上是另一个渲染世界的迁移，几何精度可以无损，但图层语义、线型样式、字体风格、块属性这些附加信息，输出 SVG 的设计和运行环境必须根据质量体系要求做好取舍。你可以归档原始 CAD 文件来兜底，让 SVG 承载“评审用图”职责，两者并行，不互相替代。

第二，重视你编辑器和浏览器之间的事件时序。TinyMCE 的 paste 流程从浏览器原生事件到编辑器内容更新，中间有很多阶段，从 paste 原生事件到 PastePreProcess 再到 BeforeSetContent。在哪个阶段做替换、逻辑覆盖哪些数据格式，需要针对你的 TinyMCE 版本做快速验证，因为各个版本的执行顺序有变动，直接照搬旧版本代码容易踩坑。

第三，最容易被忽略的是 SVG 安全问题。内嵌完整 SVG 除了可交互能力大增外，也能处理少量难以想像的字符绕过场景。如果做矢量输出，后端入库前必须增加白名单和反序列化清洗的步骤。芯片企业服务器安全等级要求高，这一步切莫节约时间。

第四，要留一条人工后门。工程文档场景中，若系统判定当前图纸没有矢量来源，但工程师仍然急于提交，要在界面上提供“插入位图并作出标记”的选项，同时系统在文档类型字段上标示该文档缺少 CAD 矢量源，需要后续补充关联。强制禁用位图反而导致业务流程被憋死，团队对系统的信任度和配合度也会下降。

我实际使用下来，对工程师体验最顺手的一个操作是在 CAD 侧用插件设置快捷键一键调起“导出并发送到当前文档”，由于省去了先导出文件再回到网页上传的繁琐步骤，工程师在 CAD 里复制+点击按钮，浏览器编辑器里立即出现矢量图并自动勾选对应物料编码，这套闭环带来的提效价值比任何后台优化都明显。

后续如果想扩展，方向可以考虑 SVG 中引用式分层加载、二维码/条形码绑定原始 CAD 文件的版本，以及与 PLM/EDMS 做自动关联，这些内容会比我目前这套纯前端嵌入有更强的体系意义。不过先把“矢量进去”这一步做到位，图纸数据在网页端不再降级，后面的扩展才能继续。