Ошибка переменной throw <undefined ', не может понять

Я использую Raphael.js. Каждый раз, когда я загружаю страницу, я получаю сообщение об ошибке:

con is undefined
x = con.x

Я просмотрел con в документации Raphael, и вот что я нашел:

var con = R._getContainer.apply(0, arguments),
    container = con && con.container,
    x = con.x,
    y = con.y,
    width = con.width,
    height = con.height;
    //...

con здесь четко определено. Вот код, который я пытаюсь загрузить:

var paper = new Raphael(ele('canvas_container'), 500, 500);

window.onload = function() {
            var circle = paper.circle(100,100,100);
            for (i = 0; i < 5; i++) {
                var multiplier = i * 5;
                paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier);
            }
    }

Кто-нибудь еще получил эту ошибку? Является ли это ошибкой в версии Рафаэля, что у меня есть или есть какая-то другая проблема?

Ответ 1

Попробуйте переместить экземпляр бумаги внутри функции загрузки окна:

window.onload = function() {
    var paper = new Raphael(ele('canvas_container'), 500, 500);
    var circle = paper.circle(100,100,100);
    for (i = 0; i < 5; i++) {
        var multiplier = i * 5;
        paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier);
    }
}

Если вы попытаетесь получить элемент по его идентификатору до готовности DOM, getElementById ничего не вернет. Как вы можете видеть здесь, попытка вашего кода на пустой документ показывает тот же результат.

Ответ 2

Raphael.js ожидает, что на странице будет жестко закодированный HTML-элемент с именем холста Рафаэля (т.е.: canvas_container). Если элемент HTML создается во время выполнения (динамически в вашем JavaScript-коде), он выдает эту ошибку.

R._engine.create = function () {
    var con = R._getContainer.apply(0, arguments),
        container = con && con.container,
        x = con.x,
        y = con.y,
        width = con.width,
        height = con.height;
    if (!container) {
        throw new Error("SVG container not found.");
    }
    var cnvs = $("svg"),
        css = "overflow:hidden;",
        isFloating;
    x = x || 0;
    y = y || 0;
    width = width || 512;
    height = height || 342;
    $(cnvs, {
        height: height,
        version: 1.1,
        width: width,
        xmlns: "http://www.w3.org/2000/svg"
    });
    if (container == 1) {
        cnvs.style.cssText = css + "position:absolute;left:" + x + "px;top:" + y + "px";
        R._g.doc.body.appendChild(cnvs);
        isFloating = 1;
    } else {
        cnvs.style.cssText = css + "position:relative";
        if (container.firstChild) {
            container.insertBefore(cnvs, container.firstChild);
        } else {
            container.appendChild(cnvs);
        }
    }
    container = new R._Paper;
    container.width = width;
    container.height = height;
    container.canvas = cnvs;
    container.clear();
    container._left = container._top = 0;
    isFloating && (container.renderfix = function () {});
    container.renderfix();
    return container;
};