¿Cómo aplico estilos CSS a los objetos Raphael.js usando jQuery?

Question

¿Alguien tiene alguna experiencia con la biblioteca SVG de Raphael.js?

Estoy usando Raphael.js para crear un mapa SVG (para usar en teléfonos inteligentes) pero estoy teniendo problemas para abrir los objetos del mapa que Raphael crea hasta la interacción exterior por jQuery y el estilo por css.

var R = Array(); 
    R[1] = new Raphael("level1", 408, 286); 
    R[2] = new Raphael("level2", 408, 286); 
    R[3] = new Raphael("level3", 408, 286); 
    R[4] = new Raphael("level4", 408, 286); 
    R[5] = new Raphael("level5", 408, 286); 

var attr = { 
    fill: "#ccc", 
    stroke: "#000", 
    "stroke-width": 0.5, 
    "stroke-linecap": "square", 
    "stroke-linejoin": "miter" 
}; 

// loop through a bunch of objects (not shown for brevity) 
    // in the end, I end up with a couple hundred objects drawn by Raphael 

    var o = R[fID].path(coordstring).attr(attr); 

    // creates an #o[ID] id value that jQuery can target 
    o.node.id = "o"+$(this).attr('id'); // id value comes from data source 

    o.click(function(){ 
     highlightMapObject(this.node.id.substr(1));        
    ); 

// end loop 

// accessed from the o.click and from outside in jQuery 
function highlightMapObject(oid){ 
    var $target = $("#o"+oid); 
    $target.addClass('highlight'); 
} 

El problema que parece estar corriendo en es que se trata de añadir una clase para el objeto Raphael no funciona, o si está funcionando, los atributos CSS de esa clase (como los colores de fondo modificados, etc.) no se están aplicando.

Así que si mi clase es DESTACAR:

.highlight { background-color: #f00; } 

que o bien no se aplica, o no es sobrescribir el fill:"ccc" de los attrs originales Raphael. Supongo que debido a que la ID que apunta jQuery está en el objeto NODE de Raphael en lugar del objeto en sí, eso probablemente sea parte del problema.

He visto muchos consejos para evitar el nodo por completo cuando trato con Raphael, pero parece ser la única forma que he encontrado para abrir un objeto de Raphael hasta la orientación externa (en este caso a través de jQuery).

no tener que utilizar CSS para lograr el cambio de estilo en estos objetos, pero sí tiene que ser capaz de lograr que el cambio externo (a través de jQuery - en respuesta a las peticiones de relieve externos, etc) en lugar de todo internamente (a través de Raphael y solo en respuesta a los clics de objetos).

Ideas?

Gracias!

Answer 1

No estoy exactamente seguro de lo que el código está haciendo, pero si usted desea conseguir un objeto jQuery cabo de un objeto Raphael continuación, haga esto:

var $jQueryObject = $(raphaelObject.node); 

Desde allí se puede utilizar jQuery para agregar una clase :

$jQueryObject.addClass('highlight'); 

Answer 2

También encontré que si elimina los estilos en línea después de representar la ruta con raphael.

$('#somediv path').removeAttr('fill').removeAttr('stroke'); 

continuación, puede estilo de cómo cada vez que desee utilizar css

#somediv path { fill: white; } 
#somediv:hover path { fill: blue; } 

Answer 3

O agregar una clase como un atributo

$jQueryObject.attr('class', 'highlight'); 

Esto funcionará en lugar de

$jQueryObject.addClass('highlight');