如何使用jQuery将CSS样式应用于Raphael.js对象？

有没有人对Raphael.js SVG图书馆有任何经验？

我正在使用Raphael.js创建一个SVG地图(用于智能手机),但是我无法打开Raphael创建的地图对象,通过jQuery创建外部交互,并通过CSS设计样式.

var R = Array();  
    R[1] = new Raphael("level1",408,286);  
    R[2] = new Raphael("level2",286);  
    R[3] = new Raphael("level3",286);  
    R[4] = new Raphael("level4",286);  
    R[5] = new Raphael("level5",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; }

这不是应用,还是不覆盖填充：“ccc”从原来的Raphael attrs.我猜测是因为jQuery所针对的ID是Raphael对象NODE而不是对象本身,这可能是问题的一部分.

在处理Raphael时,我已经看到很多建议来避免节点,但它似乎是我找到打开一个Rafael对象的唯一方式,直到外部目标(在这种情况下是通过jQuery).

我不必使用CSS来实现这些对象的样式更改,但我必须能够通过外部实现(通过jQuery – 响应外部高亮显示请求等),而不是内部(通过Raphael和只响应对象点击).

想法？

谢谢！

解决方法

我不确定你的代码是在做什么,但是如果你想从Raphael对象中获取一个jQuery对象,那么这样做：

var $jQueryObject = $(raphaelObject.node);

从那里你可以使用jQuery添加一个类：

$jQueryObject.addClass('highlight');