如何解决Safari浏览器中获取SVG截图时图层丢失问题？

Safari 对SVG命名空间校验、跨域资源加载、foreignObject 渲染的规则比Chrome严格，dom-to-image 默认的序列化逻辑没有做对应适配是图层丢失的核心原因，可落地的解决方法如下：

• 补全SVG全节点命名空间，内嵌所有外部资源
  遍历目标SVG下的所有嵌套节点（包括嵌套svg、foreignObject、pattern、clipPath等子节点），强制补全xmlns="http://www.w3.org/2000/svg"命名空间属性，Safari识别不到命名空间时会直接跳过该节点不渲染。同时把SVG内所有引用的外部图片、字体、外链样式资源全部转成base64内嵌，不要保留任何跨域、相对路径的资源引用，处理完成后可以先把序列化后的SVG字符串放到普通img标签里加载验证，确认所有图层正常显示后再传入dom-to-image处理。
• 调整dom-to-image初始化配置适配Safari规则
  调用截图方法时增加如下配置，规避Safari的渲染兼容问题：

  domtoimage.toPng(targetNode, {
    styleInline: true, // 强制把所有继承、外联样式内联到节点上，避免Safari读取样式失败
    cacheBust: true, // 给资源地址加随机参数，绕过Safari跨域缓存拦截
    width: targetNode.offsetWidth * 2, // 手动指定渲染尺寸，避免Safari获取元素尺寸为0导致图层被裁剪
    height: targetNode.offsetHeight * 2,
    filter: (node) => {
      // 过滤掉Safari不支持的SVG滤镜节点，避免单个节点异常导致整层渲染失败
      return node.tagName !== 'feConvolveMatrix'
    }
  })
  

  另外要注意排查SVG内使用的CSS属性，backdrop-filter、mix-blend-mode的部分取值在Safari的canvas渲染环境下不被支持，使用这类属性的图层会被直接丢弃，需要提前替换成Safari兼容的实现。
• 绕开foreignObject渲染逻辑，单独处理SVG节点
  dom-to-image的核心实现是把DOM包裹进foreignObject嵌入SVG再渲染到canvas，Safari对foreignObject内多层嵌套SVG、复杂DOM的渲染bug长期存在，复杂场景下可以跳过这层转换：直接提取目标SVG的outerHTML，补全命名空间和内联样式后转成Blob生成本地URL，传入Image对象加载完成后直接绘制到canvas导出，纯SVG的渲染路径在Safari下稳定性远高于foreignObject方案。
• Safari环境下做兜底降级
  检测到当前运行环境是Safari时，自动切换到html2canvas作为截图库，开启useCORS: true配置，截图前暂时移除SVG上的动画、交互属性避免渲染错位，作为最终兜底方案。

避坑提示：所有加载的跨域图片、字体资源必须配置正确的CORS响应头，同时资源加载时设置crossOrigin="anonymous"属性，否则Safari会将画布标记为污染状态，轻则图层丢失，重则直接导出空白图片。

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