Jak zastosować style CSS do obiektów Raphael.js za pomocą jQuery?

Question

Czy ktoś ma jakieś doświadczenie z biblioteką SVG Raphael.js?

Używam Raphael.js do stworzenia mapy SVG (do użytku na smartfonach), ale mam problem z otwarciem obiektów mapy, które Raphael tworzy do zewnętrznej interakcji przez jQuery i stylizacji przez 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'); 
} 

Kwestia I wydają się być uruchomione na to, że próbuje dodać klasę do obiektu Raphael nie działa, lub jeśli to działa, atrybuty CSS tej klasy (jak zmienionymi kolorami tła itd) nie są stosowane.

Więc jeśli mój HIGHLIGHT klasa:

.highlight { background-color: #f00; } 

To jest albo nie jest stosowana lub nie jest nadpisanie fill:"ccc" z oryginalnych attrs Raphael. Domyślam się, że ponieważ ID, którego celem jest jQuery, znajduje się na obiekcie Raphael NODE, a nie na samym obiekcie, to prawdopodobnie część problemu.

Widziałem wiele porad, aby całkowicie uniknąć węzła w kontaktach z Rafaelem, ale wydaje się, że jest to jedyny sposób, w jaki znalazłem otwarcie obiektu Raphael do zewnętrznego kierowania (w tym przypadku przez jQuery).

Nie muszę używać CSS, aby uzyskać zmianę stylu na tych obiektach, ale muszę być w stanie uzyskać tę zmianę zewnętrznie (przez jQuery - w odpowiedzi na zewnętrzne prośby o podświetlanie, itp.) Raczej niż w przypadku wszystko wewnętrznie (przez Raphael i tylko w odpowiedzi na kliknięcia obiektu).

Pomysły?

Dzięki!

Answer 1

nie jestem do końca pewien, co kod robi, ale jeśli chcesz uzyskać obiekt jQuery z obiektu Raphael następnie to zrobić:

var $jQueryObject = $(raphaelObject.node); 

Stamtąd można użyć jQuery, aby dodać klasę :

$jQueryObject.addClass('highlight'); 

Answer 2

Stwierdziłem również, że jeśli usuniesz style śródliniowe po renderowaniu ścieżki za pomocą raphael.

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

następnie można projektować je jak kiedykolwiek chcesz za pomocą CSS

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

Answer 3

Albo dodać klasę jako atrybut

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

to będzie działać zamiast

$jQueryObject.addClass('highlight');