Comment puis-je appliquer des styles CSS à Raphael.js les objets à l'aide de jQuery?

Quelqu'un at-il une expérience avec le Raphael.js SVG bibliothèque?

Je suis en utilisant Raphael.js pour créer un SVG carte (pour une utilisation sur les smartphones), mais je vais avoir du mal à ouvrir les objets de la carte que Raphaël crée à l'extérieur de l'interaction par jQuery et le style en 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');  
}  

La question que je semble être en cours d'exécution en est que d'essayer d'ajouter une classe à l'Raphaël objet ne fonctionne pas, ou si il est au travail, le CSS attributs de cette classe (comme changé de couleur de fond, etc) ne sont pas appliquées.

Donc, si mon .mettez en surbrillance de la classe est:

.highlight { background-color: #f00; }

Qui n'est pas appliquée, ou n'est pas d'écraser l' fill:"ccc" à partir de l'original Raphaël attrs. Ma conjecture est que parce que l'ID de la cible de jQuery est sur la Raphaël NŒUD d'objet plutôt que l'objet lui-même, c'est probablement une partie du problème.

J'ai vu beaucoup de conseils pour éviter nœud complètement lorsque vous traitez avec Raphaël, mais il semble être le seul moyen que j'ai trouvé pour ouvrir un Raphaël objet jusqu'à l'extérieur de ciblage (dans ce cas via jQuery).

Je n'ai pas à utiliser les CSS pour obtenir le changement de style de ces objets, mais je dois être en mesure de réaliser que le changement de l'extérieur (via jQuery - en externe, mettre en évidence les demandes, etc) plutôt que tous en interne (via Raphaël et uniquement en réponse à l'objet de clics).

Idées?

Merci!

J'aime le Raphaël de la bibliothèque. J'ai été particulièrement impressionné par la façon dont il pourrait intégrer avec jQuery.

OriginalL'auteur Will Henderson | 2011-01-07