SVG在Chrome、Safari可渲染，Firefox却失效？求无需修改SVG的方案

Firefox的Image对象不会自动从SVG的viewBox属性推断宽高，导致调用drawImage时因为尺寸为0而无法渲染。以下是无需修改原SVG文件的解决办法：

方案1：解析SVG文本提取viewBox设置尺寸 #

通过Fetch加载SVG文本，用DOMParser解析出viewBox的值，手动给Image对象设置宽高：

const svgUrl = "https://svgur.com/i/soR.svg";
const ctx = document.querySelector("canvas").getContext("2d");

fetch(svgUrl)
  .then(res => res.text())
  .then(svgText => {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
    const viewBox = svgDoc.querySelector("svg").getAttribute("viewBox");
    
    if (!viewBox) return;
    const [, , width, height] = viewBox.split(/\s+/).map(Number);
    
    const svgImg = new Image();
    svgImg.onload = () => {
      // 同步canvas尺寸与SVG viewBox
      ctx.canvas.width = width;
      ctx.canvas.height = height;
      
      function drawImage() {
        ctx.drawImage(svgImg, 0, 0, width, height);
        requestAnimationFrame(drawImage);
      }
      requestAnimationFrame(drawImage);
    };
    svgImg.src = svgUrl;
  })
  .catch(err => console.error("加载SVG失败:", err));

方案2：借助隐藏SVG元素获取计算尺寸 #

如果SVG包含preserveAspectRatio等复杂属性，可创建隐藏DOM元素加载SVG，获取其计算后的宽高：

const svgUrl = "https://svgur.com/i/soR.svg";
const ctx = document.querySelector("canvas").getContext("2d");

// 创建隐藏SVG容器
const hiddenContainer = document.createElement("div");
hiddenContainer.style.cssText = "position:absolute;visibility:hidden;overflow:hidden;";
document.body.appendChild(hiddenContainer);

fetch(svgUrl)
  .then(res => res.text())
  .then(svgText => {
    hiddenContainer.innerHTML = svgText;
    const svgEl = hiddenContainer.querySelector("svg");
    const computedStyle = window.getComputedStyle(svgEl);
    
    const width = parseFloat(computedStyle.width);
    const height = parseFloat(computedStyle.height);
    
    const svgImg = new Image();
    svgImg.onload = () => {
      ctx.canvas.width = width;
      ctx.canvas.height = height;
      
      function drawImage() {
        ctx.drawImage(svgImg, 0, 0, width, height);
        requestAnimationFrame(drawImage);
      }
      requestAnimationFrame(drawImage);
      
      // 清理临时元素
      hiddenContainer.remove();
    };
    svgImg.src = svgUrl;
  })
  .catch(err => {
    console.error("加载SVG失败:", err);
    hiddenContainer.remove();
  });

注意事项 #

• 两种方案均无需修改原SVG文件，适合批量处理数百个SVG的场景。
• 方案1性能更优，无需操作DOM；方案2兼容性更好，能处理复杂SVG布局逻辑。

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