variable que arroja el error "indefinido", no puede entender

Question

Estoy usando Raphael.js. Cada vez que se carga la página me sale un error que dice lo siguiente:

con is undefined 
x = con.x 

Miré hacia arriba en la documentación con Raphael, y esto es lo que encontré:

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

con está claramente definido aquí. Aquí está el código que estoy tratando de cargar:

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); 
      } 
    } 

¿Alguien más ha recibido este error? ¿Es esto un error en la versión de Raphael que tengo o hay algún otro problema?

Answer 1

trate de mover la creación de instancias de papel dentro de la función de carga de la ventana:

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); 
    } 
} 

Si se intenta obtener un elemento por su ID antes de que el DOM está listo, getElementById no se devuelve nada. Como puede ver here, probar su código en un documento vacío muestra el mismo resultado.

Answer 2

Raphael.js espera que haya un elemento HTML codificado en la página con el nombre del lienzo de Raphael (es decir, "canvas_container"). Si el elemento HTML se crea durante el tiempo de ejecución (dinámicamente en su código JavaScript), lanzará este error.

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; 
};