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!
OriginalL'auteur Will Henderson | 2011-01-07
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas exactement sûr de ce que vous code est fait, mais si vous voulez obtenir un objet jQuery d'un Raphaël objet, puis le faire:
À partir de là, vous pouvez utiliser jQuery pour ajouter une classe:
Et oui, je ne suis pas exactement sûr de ce que mon code est fait 🙂
Bien
attr
est une carte de Raphaël attributs non des propriétés CSS et doit être appliqué à un Raphaël objet à l'aide de attr. Une fois que vous avez un objet jQuery addClass devrait certainement travailler.Hrm, donc il semble que je ne suis pas le réglage de l'objet jQuery correctement, de sorte que mon code était encore le référencement
o.node.id = "o"+$(this).attr('id');
que l'id de nœud valeur que j'ai mis, c'est pourquoi$target.css(attrs);
travail a été mais$target.addClass('highlight');
ne l'était pas. Je vais faire un tri. Merci.quel est le code?
OriginalL'auteur Marcus Whybrow
J'ai trouvé aussi que si vous retirez les styles en ligne après avoir rendu le chemin avec raphaël.
ensuite, vous pouvez choisir comment vous voulez à l'aide de css
OriginalL'auteur Trevor Nowak
Ou si vous ajoutez une classe comme un attribut
Cela va travailler au lieu de
OriginalL'auteur Jan