在 mPDF 中正确缩放 SVG（含 path）的完整实践指南

本文详解如何绕过 mpdf 对 CSS 百分比样式（如 width: 28%）的支持限制，通过动态修改 svg 的 width/height 属性与 viewBox 协同适配，实现精准、可预测的矢量图缩放并可靠渲染到 PDF。

本文详解如何绕过 mpdf 对 css 百分比样式（如 `width: 28%`）的支持限制，通过动态修改 svg 的 `width`/`height` 属性与 `viewbox` 协同适配，实现精准、可预测的矢量图缩放并可靠渲染到 pdf。

在 Web 端通过 控制 SVG 缩放（如 style=”width: 28%”）是一种常见交互方式，但该方案在服务端生成 PDF（尤其是使用 mPDF）时会失效——mPDF 几乎完全忽略 transform），仅解析原始 SVG 属性和 viewBox。若直接将带百分比样式的 SVG 字符串传入 mPDF，图像往往被忽略、裁剪或以默认尺寸（如 300×150 px）失真渲染。

根本解法是：在生成 PDF 前，彻底移除所有 CSS 样式，转而通过 JavaScript 动态重写 SVG 的原生属性（width、height、viewBox），确保其尺寸完全由绝对数值定义，并与目标 PDF 区域逻辑匹配。

✅ 正确缩放步骤（客户端预处理）

首先，获取原始 SVG 元素并计算缩放因子（例如你已有的 getScale() 返回 33，即 33% → 缩放系数 scale = 0.33）：

function scaleSVG(svg, scale = 1) {   // 安全获取原始 width/height（支持 px、无单位数值，自动转换 %）   const originalWidth = svg.width.baseVal.value || parseFloat(svg.getAttribute('width')) || 0;   const originalHeight = svg.height.baseVal.value || parseFloat(svg.getAttribute('height')) || 0;    // 计算新尺寸（绝对像素值）   const newWidth = originalWidth * scale;   const newHeight = originalHeight * scale;    // ✅ 关键：仅设置 width/height 属性（不设 style！）   svg.setAttribute('width', `${newWidth}px`);   svg.setAttribute('height', `${newHeight}px`);    // ✅ 可选但强烈推荐：同步缩放 viewBox 以保持图形比例一致   const viewBox = svg.viewBox.baseVal;   if (viewBox && viewBox.width > 0 && viewBox.height > 0) {     svg.setAttribute('viewBox', [       viewBox.x,       viewBox.y,       viewBox.width * scale,       viewBox.height * scale     ].join(' '));   } }  // 使用示例：将 SVG 缩放到原尺寸的 33% const svgEl = document.getElementById('svg-number'); scaleSVG(svgEl, 0.33); // 注意：传入小数而非百分比整数

? 为什么用 baseVal.value？
svg.width.baseVal.value 是 SVG dom 的标准接口，能正确解析 width=”686.28px” 或 width=”100%”（后者会转换为当前上下文的绝对像素值），比 getAttribute() 更健壮；若需兼容性兜底，再 fallback 到 parseFloat(getAttribute())。

? 服务端集成（mPDF 渲染）

确保传入 mPDF 的 SVG 字符串 不含任何 style 属性，且 width/height/viewBox 均为纯数字 + px（或无单位，mPDF 接受）：

// PHP 示例：将处理后的 SVG 字符串注入 HTML 模板 $processedSvg = htmlspecialchars($scaledSvgHtml, ENT_QUOTES, 'UTF-8'); $template .= '<td align="center" style="width: 1890px; height: 913px; vertical-align: middle;">' . $processedSvg . '</td>';

✅ mPDF 兼容要点：

• ✅ 支持
• ✅ 支持 viewBox 缩放（保证路径比例不变）
• ❌ 不支持 style=”width: 28%”、style=”transform: scale(0.33)”
• ❌ 不支持 width=”28%”（百分比单位会被忽略，回退为默认值）

⚠️ 注意事项与最佳实践

• 始终验证 viewBox：你的原始 SVG 的 viewBox=”62.62 245 686.28 540.89″ 包含非零 x/y 偏移。缩放 viewBox 时必须同时缩放 width/height，但 x/y 应保持原值（除非你刻意要裁剪），否则图形会偏移。上例代码已体现此原则。
• 移除冗余样式：在序列化 SVG 为字符串前，建议清理 style 属性：

  svg.removeAttribute('style'); // 彻底移除，避免干扰

• 单位统一：mPDF 对 px 单位最友好；避免使用 em、rem、% 或无单位数值（虽部分支持，但行为不稳定）。
• 测试实际输出尺寸：mPDF 的单元格（ ）尺寸会影响渲染效果。若 SVG 在 PDF 中仍偏小，可微调缩放系数（如 0.33 → 0.35），或增大容器 style=”width: 2000px” 并配合 !important 强制宽度（mPDF 支持有限 CSS）。

• 备选方案（复杂场景）：若路径需独立缩放（如仅放大 path 而不改变 SVG 容器），可用 包裹 ，但需确保 viewBox 已适配，且 mPDF 版本 ≥ 8.1（对 transform 支持更完善）。

通过以上方法，你将获得一个尺寸精确、比例一致、mPDF 可靠渲染的 SVG —— 既满足前端交互需求，又保障 PDF 输出质量。核心原则始终如一：用 SVG 原生属性替代 CSS 样式，用绝对数值替代相对单位。