本文详解如何在前端动态缩放含 的 SVG，并通过修改原生 width/height 属性而非 CSS 样式，确保其在 mPDF 等 PDF 生成库中正确、等比、无失真地渲染。
本文详解如何在前端动态缩放含 `
在 Web 应用中，常需让用户通过 UI（如 radio 按钮）调节 SVG 尺寸后导出为 PDF。但直接使用 style="width: 28%" 在 mPDF 中几乎无效——因其对 CSS 百分比、auto 高度及部分内联样式支持极弱，且不解析 viewBox 缩放逻辑。真正可靠的方式是：直接重写 SVG 元素的 width 和 height 属性值（单位为 px），并同步校准 viewBox（如需保持比例精度）。
✅ 正确缩放 SVG 的核心方法
以下 JavaScript 函数可安全、精确地按比例缩放任意 SVG 元素（包括含
function scaleSVG(svgElement, scale) {
// 获取原始宽高（单位：px），优先使用 baseVal.value（自动处理单位转换）
const originalWidth = svgElement.width.baseVal.value;
const originalHeight = svgElement.height.baseVal.value;
// 计算新尺寸（保留小数以保证精度）
const newWidth = parseFloat((originalWidth * scale).toFixed(3));
const newHeight = parseFloat((originalHeight * scale).toFixed(3));
// 直接设置 width/height 属性（mPDF 可识别）
svgElement.setAttribute('width', `${newWidth}px`);
svgElement.setAttribute('height', `${newHeight}px`);
// ⚠️ 关键：若需严格保持视觉比例与响应性，建议同步缩放 viewBox
// （尤其当原始 viewBox 非 0,0 起始时）
const viewBoxAttr = svgElement.getAttribute('viewBox');
if (viewBoxAttr) {
const [x, y, w, h] = viewBoxAttr.split(/\s+/).map(Number);
svgElement.setAttribute('viewBox', `${x * scale} ${y * scale} ${w * scale} ${h * scale}`);
}
}调用示例（将 SVG 缩放至原尺寸的 5%）：
const svg = document.getElementById('svg-number');
scaleSVG(svg, 0.05); // → width="34.314px", height="27.045px"? 服务端集成：确保 mPDF 正确接收
mPDF 仅解析 SVG 的 属性值（attribute），而非 CSS 样式。因此，在 PHP 模板中，应直接嵌入已缩放的 SVG 字符串，禁止包裹额外 style 或依赖外部 CSS：
// ✅ 正确：传入已缩放的纯 SVG 字符串（无 style 属性）
$template .= '<td align="center" style="width: 1890px; height: 913px; vertical-align: middle;">'
. htmlspecialchars($scaledSvgString)
. '</td>';? 提示：$scaledSvgString 必须是经前端或服务端（如 PHP 的 DOMDocument）完成 width/height 属性重写的 SVG HTML 片段，且建议使用 htmlspecialchars() 防止 XSS。
⚠️ 注意事项与最佳实践
- 避免 style 属性干扰：删除 SVG 中所有 style="..."（如 style="width:28%"），mPDF 可能忽略或错误解析它；
- 单位必须明确：width/height 值推荐带 px 单位（如 "659.013px"），虽 mPDF 有时接受无单位数值，但显式声明更稳妥；
- viewBox 不是必需，但强烈推荐：若原始 SVG 依赖 viewBox 实现缩放/居中，缩放时务必同比例调整其四元组，否则路径可能裁切或偏移；
- 测试不同 scale 值：mPDF 对极小尺寸（如
- 替代方案（服务端处理）：若前端不可控，可用 PHP 的 DOMDocument 解析 SVG 并批量修改属性，增强健壮性。
✅ 总结
要让含
? 放弃 CSS width/height，改用 SVG 原生属性；
? 用 baseVal.value 安全读取原始尺寸，避免 getAttribute() 解析失败；
? 同步缩放 viewBox（如有），保障坐标系一致性；
? 服务端直传纯净 SVG 字符串，杜绝样式污染。
遵循此流程，即可实现从用户交互缩放到 PDF 输出的全链路可控、高保真矢量图形渲染。
