Matter.js/SVG.js在Safari中出现'ReferenceError: Can't find variable: draw'错误求助

针对你遇到的问题，给出以下排查和解决步骤：

• 确认SVG.js加载时机
  确保SVG.js脚本在使用draw变量之前完全加载。如果是通过CDN引入，避免使用async属性（除非你确保代码在脚本加载完成后执行），或者用DOMContentLoaded事件包裹初始化代码：

  document.addEventListener('DOMContentLoaded', () => {
    // 在这里初始化SVG.js和Matter.js相关代码
    const draw = SVG().addTo('#target-div').size(400, 300);
    // 后续的半圆绘制逻辑
  });
  

• 检查draw变量的作用域
  如果你在局部作用域中声明draw（比如某个函数内部），但在外部尝试访问，就会触发该错误。确保draw的声明范围覆盖所有需要使用它的代码，或者将相关逻辑封装在同一个作用域内：

  function initFloatingShapes() {
    const draw = SVG().addTo('#background-div');
    // 绘制半圆
    const semicircle = draw.path('M 0 100 A 100 100 0 1 1 200 100 Z').fill('#ccc');
    // 转换为Matter.js可用的形状路径...
  }
  initFloatingShapes();
  

• 验证SVG.js版本兼容性
  部分旧版本的SVG.js在Safari上存在兼容问题，建议升级到最新稳定版，替换CDN链接为最新版本后测试是否解决问题。

• 排查语法兼容性问题
  Safari对某些ES6+语法的支持可能晚于其他浏览器，比如可选链操作符?.、空值合并??等。如果你的代码中使用了这些特性，建议通过Babel转译，或者替换为兼容写法。

• 隔离测试SVG.js功能
  先剥离Matter.js的逻辑，单独测试SVG.js在Safari中的运行情况。比如创建一个极简页面，只包含SVG.js的初始化和半圆绘制，确认draw变量能正常访问，再逐步整合Matter.js的代码，定位冲突点。

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