使用.setAttribute()调整SVG尺寸无效，PDF导出图表过大求助

我之前也碰到过一模一样的糟心事——页面上铺满宽度的D3图表，用pdfkit搭配SVG-to-PDFKit导出成PDF时直接撑得超出页面。折腾了好半天踩坑，终于找到几个可行的调整方案，分享给你：

方法1：直接用SVG-to-PDFKit的内置缩放参数（最简单） #

其实你可能漏掉了SVG-to-PDFKit的一个隐藏配置：它支持直接传入缩放比例，不用去折腾SVG的属性。只需要在调用时加个配置对象就行：

// 获取页面上的目标SVG
const chartSvg = document.getElementById('your-d3-chart-id');
// 定义PDF里想要的目标宽度（比如A4纸留边后取550px，pdfkit默认单位是点，和px近似）
const targetPdfWidth = 550;
// 计算缩放比例：目标宽度 / 原SVG的实际宽度
const scaleRatio = targetPdfWidth / parseFloat(chartSvg.getAttribute('width'));

// 调用SVG-to-PDFKit时传入scale配置
svgToPdfKit(doc, chartSvg, 20, 20, { // 20,20是PDF里的起始坐标
  scale: scaleRatio
});

这个方法最快，但如果你的图表里有固定字号的文本、固定粗细的线条，缩放后可能会有点模糊，这时候可以试试下面的方法。

方法2：克隆SVG并修改内容尺寸（不影响原页面图表） #

直接改原SVG的width/height只会调整视图，内部元素的坐标还是基于原始尺寸的。你可以克隆一份SVG副本，然后整体调整它的坐标系统：

const originalSvg = document.getElementById('your-d3-chart-id');
const svgCopy = originalSvg.cloneNode(true); // 克隆副本，避免改动原页面图表

const originalWidth = parseFloat(originalSvg.getAttribute('width'));
const originalHeight = parseFloat(originalSvg.getAttribute('height'));
const targetWidth = 550;
const scale = targetWidth / originalWidth;
const targetHeight = originalHeight * scale;

// 调整viewBox，让SVG的坐标系统适配目标尺寸
svgCopy.setAttribute('viewBox', `0 0 ${originalWidth} ${originalHeight}`);
svgCopy.setAttribute('width', targetWidth);
svgCopy.setAttribute('height', targetHeight);

// 用D3选中副本里的所有元素，统一缩放坐标
d3.select(svgCopy).selectAll('*')
  .attr('transform', (d) => {
    const originalTransform = d3.select(this).attr('transform') || '';
    return `${originalTransform} scale(${scale})`;
  });

// 把修改后的副本传给PDFKit
svgToPdfKit(doc, svgCopy, 20, 20);

方法3：专门为PDF渲染适配尺寸的图表 #

如果上面两种方法都有布局错乱的问题，最稳妥的方式是重新渲染一个适配PDF尺寸的图表：

// 创建一个隐藏的SVG容器，专门用于PDF导出
const pdfSvg = d3.select('body').append('svg')
  .attr('width', 550)
  .attr('height', 350)
  .style('display', 'none');

// 复用你的D3图表渲染逻辑，传入新的容器和尺寸
renderYourD3Chart(pdfSvg, 550, 350); // 假设你的渲染函数接受容器、宽、高三个参数

// 等渲染完成后再导出（加个小延迟确保渲染完成）
setTimeout(() => {
  svgToPdfKit(doc, pdfSvg.node(), 20, 20);
  // 导出完成后删掉隐藏的SVG
  pdfSvg.remove();
}, 150);

内容的提问来源于stack exchange，提问作者user3376654