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

Question

有没有人对Raphael.js SVG库有任何经验？

我正在使用Raphael.js创建一个SVG地图(用于智能手机),但我无法打开Raphael通过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 attrs.我的猜测是因为jQuery的目标ID是Raphael对象NODE而不是对象本身,这可能是问题的一部分.

在与Raphael打交道时,我已经看到很多建议完全避免节点,但这似乎是我发现拉开对象的唯一方法,直到外部定位(在这种情况下通过jQuery).

我没有必要使用CSS来实现这些对象的样式更改,但我必须能够在外部实现更改(通过jQuery - 响应外部突出显示请求等)而不是全部内部(通过Raphael和仅响应对象点击).

想法？

谢谢!

Answer 1

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

var $jQueryObject = $(raphaelObject.node);

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

$jQueryObject.addClass('highlight');

Answer 2

我还发现,如果在使用raphael渲染路径后删除内联样式.

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

那么你可以使用css来设置它们的样式

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