Как применить стили CSS к объектам Raphael.js, используя jQuery? - PullRequest
Новая
       1

Как применить стили CSS к объектам Raphael.js, используя jQuery?

9 голосов
/ 08 января 2011

Есть ли у кого-нибудь опыт работы с библиотекой Raphael.js SVG?

Я использую Raphael.js для создания карты SVG (для использования на смартфонах), но у меня возникают проблемы при открытии объектов картычто Рафаэль создает внешнее взаимодействие с помощью jQuery и стилизацию с помощью 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');  
}

Проблема, с которой я, похоже, сталкиваюсь, заключается в том, что попытка добавить класс в объект Raphael не работает, или еслиработает, атрибуты CSS этого класса (например, измененные цвета фона и т. д.) не применяются.

Так что, если мой класс .highlight имеет вид: 

.highlight { background-color: #f00; }

Это либо неприменяется или не перезаписывает fill:"ccc" из оригинальных атрибутов Рафаэля.Я предполагаю, что поскольку ID, на который нацелен jQuery, находится на объекте Raphael NODE, а не на самом объекте, это, вероятно, часть проблемы.

Я видел много советов, чтобы вообще избегать узлов при работе сРафаэль, но, похоже, я нашел единственный способ открыть объект Raphael для внешнего таргетинга (в данном случае через jQuery).

Мне не нужно использовать CSS для достижения изменения стиляна этих объектах, но я должен быть в состоянии добиться этого изменения извне (через jQuery - в ответ на запросы внешних выделений и т. д.) вместо всех внутренних (через Рафаэля и только в ответ наобъект щелкает) .

Идеи?

Спасибо!

Ответы [ 3 ]

10 голосов
/ 08 января 2011

Я не совсем уверен, что делает ваш код, но если вы хотите получить объект jQuery из объекта Raphael, сделайте следующее: 

var $jQueryObject = $(raphaelObject.node);

Оттуда вы можете использовать jQuery для добавления класса: 

$jQueryObject.addClass('highlight');
5 голосов
/ 09 июня 2011

Я также обнаружил, что если вы удаляете встроенные стили после рендеринга пути с помощью Raphael. 

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

, тогда вы можете стилизовать их как хотите, используя css 

#somediv path { fill: white; }
#somediv:hover path { fill: blue; }
3 голосов
/ 16 мая 2012

Или вы добавляете класс в качестве атрибута 

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

Это будет работать вместо 

$jQueryObject.addClass('highlight');
...