Fabric.js中SVG对象存入数组后访问报undefined错误求助

老哥，我完全懂你说的面向对象对年轻人更友好的点😉，咱们直接拆解你代码里的核心问题——异步操作的执行顺序，这也是很多刚接触异步编程的开发者容易踩的坑。

为什么会出现undefined？ #

你用的fabric.loadSVGFromURL是一个异步函数——它不会等SVG加载完成再继续执行代码，而是立刻返回，然后在后台默默加载SVG，等加载完了才会调用你传入的回调函数。

看你的代码流程：

1. 执行axles[0] = makeMySvg(...)，此时makeMySvg函数里的fabric.loadSVGFromURL开始异步加载SVG，但makeMySvg本身没有返回任何值（你写的return obj是在回调函数里，不是makeMySvg函数的返回值），所以axles[0]其实是undefined。
2. 紧接着你执行axles[0].scaleX=10，这时候SVG还没加载完，obj都还没被创建，自然会报undefined错误。

两种可行的解决方案 #

方案1：用回调函数处理后续逻辑

把需要操作obj的代码放到回调里，或者让makeMySvg接受一个回调参数，等SVG加载完成后再执行后续操作：

var axles=[];
// 给makeMySvg加一个回调参数
function makeMySvg(urlName, posx, posy, callback) {
 fabric.loadSVGFromURL(urlName,function(objects) {
 const obj = new fabric.util.groupSVGElements(objects, {
 top: posx,
 left: posy,
 opacity: 1,
 scaleX: 1,
 scaleY: 1,
 objectCaching: true
 });
 canvas.add(obj);
 canvas.renderAll();
 // 加载完成后调用回调，把obj传进去
 callback(obj);
 });
}

// 调用时传入回调，在回调里存数组、修改属性
makeMySvg('holes.svg', 100, 100, function(obj) {
 axles[0] = obj;
 axles[0].scaleX = 10;
 canvas.renderAll(); // 记得重新渲染
});

方案2：用Promise + async/await（更直观的同步写法）

如果你觉得回调嵌套看着麻烦，可以把异步操作封装成Promise，然后用async/await让代码看起来像同步执行：

var axles=[];
// 把loadSVGFromURL封装成Promise
function loadSvgPromise(urlName) {
 return new Promise((resolve, reject) => {
 fabric.loadSVGFromURL(urlName, function(objects) {
 resolve(objects);
 }, function(error) {
 reject(error); // 处理加载失败的情况
 });
 });
}

// 用async函数包裹异步逻辑
async function makeMySvg(urlName, posx, posy) {
 try {
 const objects = await loadSvgPromise(urlName);
 const obj = new fabric.util.groupSVGElements(objects, {
 top: posx,
 left: posy,
 opacity: 1,
 scaleX: 1,
 scaleY: 1,
 objectCaching: true
 });
 canvas.add(obj);
 canvas.renderAll();
 return obj;
 } catch (error) {
 console.error('SVG加载失败:', error);
 }
}

// 调用时用await，注意要在async函数里执行
(async function() {
 axles[0] = await makeMySvg('holes.svg', 100, 100);
 axles[0].scaleX = 10;
 canvas.renderAll();
})();

额外提醒 #

• 记得用const或let声明变量（比如你的obj没有声明，会变成全局变量，容易出问题）。
• 处理SVG加载失败的情况，避免程序崩溃。

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