未知宽高时SVG转PNG的跨浏览器兼容问题求助

问题核心 #

用Canvas代理将SVG转PNG的方案在Chromium浏览器正常，但Firefox失效，本质是Firefox对未定义width/height属性的SVG，不会自动继承容器尺寸，导致Canvas绘制时SVG的宽高为0，最终生成空白PNG。尤其是你提到的这个特定SVG，因为没有viewBox或明确尺寸，Firefox无法正确解析其显示大小。

解决步骤 #

1. 动态给SVG添加尺寸属性 #

在将SVG转为Blob前，先解析SVG字符串，添加基于容器实际显示尺寸的width和height：

// 假设页面中已有目标SVG元素，先获取它的实际显示尺寸
const svgElement = document.querySelector('svg');
const computedStyle = window.getComputedStyle(svgElement);
const width = computedStyle.width;
const height = computedStyle.height;

// 修改SVG字符串，插入width和height属性
const svgWithSize = svgString.replace('<svg', `<svg width="${width}" height="${height}"`);

// 后续按原流程转Blob、绘制Canvas
const svg = new Blob([svgWithSize], { type: "image/svg+xml;charset=utf-8" });
const url = DOMURL.createObjectURL(svg);
// ... 原代码逻辑

2. 基于viewBox计算尺寸（若SVG含viewBox） #

如果SVG定义了viewBox但未设置width/height，可以通过viewBox的宽高比结合容器尺寸计算：

const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
const svgElement = svgDoc.querySelector('svg');
const viewBox = svgElement.getAttribute('viewBox');

if (viewBox) {
  const [x, y, vbWidth, vbHeight] = viewBox.split(' ').map(Number);
  // 以容器宽度为基准，按viewBox比例计算高度
  const containerWidth = document.getElementById('svg-container').offsetWidth;
  const scale = containerWidth / vbWidth;
  const svgWidth = containerWidth;
  const svgHeight = vbHeight * scale;
  
  svgElement.setAttribute('width', svgWidth);
  svgElement.setAttribute('height', svgHeight);
  
  // 将修改后的SVG转回字符串
  const serializer = new XMLSerializer();
  const svgWithSize = serializer.serializeToString(svgDoc);
  
  // 后续转Blob、绘制Canvas
  const svg = new Blob([svgWithSize], { type: "image/svg+xml;charset=utf-8" });
  // ... 原代码逻辑
}

3. 调整Canvas绘制时的尺寸 #

如果无法修改SVG字符串，可在drawImage时指定目标尺寸，基于SVG在页面中的实际显示大小：

img.onload = function() {
  // 获取SVG元素的实际渲染尺寸
  const svgElement = document.querySelector('svg');
  const rect = svgElement.getBoundingClientRect();
  
  // 设置Canvas尺寸与SVG一致
  canvas.width = rect.width;
  canvas.height = rect.height;
  
  // 按实际尺寸绘制SVG到Canvas
  ctx.drawImage(img, 0, 0, rect.width, rect.height);
  
  // 后续生成PNG的逻辑不变
  var png = canvas.toDataURL("image/png");
  var mg = document.createElement("img");
  mg.setAttribute("src", png);
  document.body.appendChild(canvas);
  document.body.appendChild(mg);
  DOMURL.revokeObjectURL(png);
};

关键注意点 #

• Firefox要求SVG必须有明确的width/height才能正确在Image对象中渲染，Chromium会自动推断容器尺寸，这是两者的核心行为差异
• 对于既无viewBox也无尺寸的SVG，必须依赖其在页面中的实际显示尺寸动态添加属性，否则Firefox无法识别其大小

内容的提问来源于stack exchange，提问作者Ngọc Nguyễn