如何使用 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; }

那要么没有被应用，要么没有覆盖原始 Raphael 属性中的 fill:"ccc" 。我的猜测是，因为 jQuery 的目标 ID 位于 Raphael 对象 NODE 上，而不是对象本身，所以这可能是问题的一部分。

我见过很多在处理 Raphael 时完全避免使用节点的建议，但这似乎是我发现打开 Raphael 对象到外部目标的唯一方法（在本例中通过 jQuery）。

我不必使用 CSS 来实现这些对象的样式更改，但我必须能够从外部实现该更改（通过 jQuery - 响应外部突出显示请求等）比所有内部（通过拉斐尔并且仅响应对象点击）。

有想法吗？

谢谢！

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; }

Answer 3

或者您添加一个类作为属性

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

这将起作用而不是

$jQueryObject.addClass('highlight');