如何获取iframe中SVG文件的尺寸并按需缩放？

云上老周

2026-8-1

获取iframe内SVG尺寸并缩放的实现方法

步骤1：获取iframe内的SVG元素

先拿到iframe的DOM对象，再访问其内部文档中的SVG元素：

const iframe = document.getElementById('your-iframe-id');
const svgDoc = iframe.contentDocument || iframe.contentWindow.document;
const svg = svgDoc.querySelector('svg');

步骤2：获取SVG与iframe的尺寸

获取SVG原生尺寸：优先读取viewBox属性（这是SVG的实际视图范围），没有则取width和height属性值

let svgWidth, svgHeight;
const viewBox = svg.getAttribute('viewBox');
if (viewBox) {
  const [x, y, w, h] = viewBox.split(' ').map(Number);
  svgWidth = w;
  svgHeight = h;
} else {
  svgWidth = parseFloat(svg.getAttribute('width'));
  svgHeight = parseFloat(svg.getAttribute('height'));
}

// 获取iframe的实际显示尺寸
const iframeRect = iframe.getBoundingClientRect();
const iframeWidth = iframeRect.width;
const iframeHeight = iframeRect.height;

步骤3：计算缩放比例并调整SVG

计算宽高方向的缩放比例，取较小值保证SVG完整适配iframe且保持比例，仅在SVG尺寸大于iframe时执行缩放：

const scaleX = iframeWidth / svgWidth;
const scaleY = iframeHeight / svgHeight;
const scale = Math.min(scaleX, scaleY);

if (scale < 1) {
  // 通过transform属性实现缩放
  svg.setAttribute('transform', `scale(${scale})`);
  // 也可直接调整SVG宽高（无需保留viewBox时用）
  // svg.setAttribute('width', `${svgWidth * scale}px`);
  // svg.setAttribute('height', `${svgHeight * scale}px`);
}