如何在Fancybox弹窗中为SVG图片设置自定义宽高？

没问题，我来给你梳理下具体的实现思路和代码，亲测能解决你的需求～

核心思路 #

Fancybox提供了多个钩子（回调事件），咱们可以利用这些钩子在图片加载/显示的时机，判断当前图片是否为SVG格式，然后强制设置自定义宽高来覆盖它的实际尺寸，最后让弹窗重新适配新的尺寸。

具体实现代码 #

这里给你两种可靠的实现方式，你可以根据自己的场景选择：

方式一：在弹窗显示前处理（适合静态图片） #

Fancybox.bind("[data-fancybox]", {
  // 这里定义你需要的SVG自定义宽高
  customSVGWidth: 600,
  customSVGHeight: 400,
  beforeShow: (fancybox) => {
    // 获取当前弹窗里的图片元素
    const imgElement = fancybox.current.content;
    
    // 先判断是不是img标签（避免非图片内容干扰）
    if (imgElement.tagName === "IMG") {
      // 检测是否为SVG：覆盖后缀为.svg和data URI两种情况
      const isSVG = imgElement.src.endsWith(".svg") || imgElement.src.includes("data:image/svg+xml");
      
      if (isSVG) {
        // 强制设置自定义宽高
        imgElement.style.width = `${fancybox.options.customSVGWidth}px`;
        imgElement.style.height = `${fancybox.options.customSVGHeight}px`;
        // 让Fancybox重新计算弹窗尺寸，避免出现滚动条
        fancybox.update();
      }
    }
  }
});

方式二：在图片加载完成后处理（更可靠，适合动态加载的图片） #

如果你的图片是动态生成或者异步加载的，用这个专门针对图片的回调事件更稳妥：

Fancybox.bind("[data-fancybox]", {
  customSVGWidth: 600,
  customSVGHeight: 400,
  on: {
    // 图片加载完成后的专属回调
    "image:afterLoad": (fancybox, slide) => {
      const imgElement = slide.$image[0];
      const isSVG = imgElement.src.endsWith(".svg") || imgElement.src.includes("data:image/svg+xml");
      
      if (isSVG) {
        imgElement.style.width = `${fancybox.options.customSVGWidth}px`;
        imgElement.style.height = `${fancybox.options.customSVGHeight}px`;
        fancybox.update();
      }
    }
  }
});

关键细节提醒 #

• 响应式适配：如果你需要SVG在不同屏幕上自适应，可以把固定像素改成相对单位，比如width: 80vw; height: auto;，这样弹窗会跟着屏幕宽度调整。
• 内联SVG的特殊情况：如果你的SVG是直接写在页面里的<svg>标签（不是通过<img>引用的），那需要调整判断逻辑，直接检测元素标签是否为SVG，再设置样式即可。
• 避免冲突：不要用CSS全局设置所有img的宽高，咱们只针对Fancybox里的SVG图片单独处理，不会影响页面其他图片的显示。

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