Как применить стили CSS к объектам Raphael.js с помощью jQuery?

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

Я использую 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" из исходных атрибутов Raphael. Я предполагаю, что поскольку идентификатор, на который нацелен jQuery, находится в объекте Raphael NODE, а не в самом объекте, это, вероятно, часть проблемы.

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

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

Идеи?

Спасибо!


jquery css raphael
person Will Henderson    schedule 07.01.2011    source источник
comment
Мне нравится библиотека Рафаэля. Я был особенно впечатлен тем, насколько хорошо он может интегрироваться с jQuery.   -  person Marcus Whybrow    schedule 08.01.2011

Ответы (3)


arrow_upward
10
arrow_downward

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

var $jQueryObject = $(raphaelObject.node);

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

$jQueryObject.addClass('highlight');
person Marcus Whybrow    schedule 07.01.2011
comment
Спасибо, это отлично сработало (настройка css, но не добавление класса). Я ценю помощь. - person Will Henderson; 08.01.2011
comment
И да, я тоже не совсем уверен, что делает мой код :) - person Will Henderson; 08.01.2011
comment
Итак, attr — это карта атрибутов Raphael, а не свойств CSS, и ее необходимо применять к объекту Raphael с помощью attr. Когда у вас есть объект jQuery, addClass определенно должен работать. - person Marcus Whybrow; 08.01.2011
comment
Хм, похоже, я неправильно устанавливаю объект jQuery, поэтому мой код все еще ссылался на o.node.id = "o"+$(this).attr('id'); как на значение идентификатора узла, которое я установил, поэтому $target.css(attrs); работало, а $target.addClass('highlight'); - нет. Я разберусь с этим. Спасибо. - person Will Henderson; 08.01.2011
comment
Не могли бы вы привести пример? заранее спасибо. - person Adib Aroui; 20.05.2014

arrow_upward
6
arrow_downward

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

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

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

#somediv path { fill: white; }
#somediv:hover path { fill: blue; }
person Trevor Nowak    schedule 09.06.2011

arrow_upward
3
arrow_downward

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

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

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

$jQueryObject.addClass('highlight');
person Jan    schedule 15.05.2012