如何使用jQuery将CSS样式应用于Raphael.js对象?
有没有人有Raphael.js SVG库的使用经验?如何使用jQuery将CSS样式应用于Raphael.js对象?
我正在使用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');
}
的问题,我似乎运行到的是,试图将类添加到拉斐尔对象不起作用,或者如果是工作,该类的CSS属性(如改变背景颜色等)没有被应用。
所以,如果我的.highlight类是:
.highlight { background-color: #f00; }
要么是没有被应用,或者未覆盖从原来的拉斐尔ATTRS的fill:"ccc"
。我的猜测是,因为jQuery所针对的ID位于Raphael对象的NODE而不是对象本身,这可能是问题的一部分。
我已经看到很多建议,以避免节点完全与Raphael打交道时,但似乎是我发现打开一个Raphael对象到外部目标(在这种情况下通过jQuery)的唯一途径。
我不必使用CSS来实现这些对象的样式更改,但我必须能够实现外部更改(通过jQuery - 响应外部高亮请求等)而不是所有内部(通过拉斐尔和只响应对象点击)。
想法?
谢谢!
我不完全相信你的代码是做什么的,但如果你想获得一个jQuery对象了拉斐尔对象的再做到这一点:
var $jQueryObject = $(raphaelObject.node);
从那里,你可以使用jQuery来添加一个类:
$jQueryObject.addClass('highlight');
非常感谢(设置CSS,但不添加类)。我很感激帮助。 – 2011-01-07 21:25:58
是的,我不完全确定我的代码是做什么:) – 2011-01-07 21:26:30
我还发现,如果您在用raphael渲染路径后删除了内联样式。
$('#somediv path').removeAttr('fill').removeAttr('stroke');
那么你可以他们的风格,你想怎么过使用CSS
#somediv path { fill: white; }
#somediv:hover path { fill: blue; }
或者你添加一个类作为属性
$jQueryObject.attr('class', 'highlight');
这会工作,而不是
$jQueryObject.addClass('highlight');
我爱拉斐尔图书馆。我对jQuery的整合能力印象深刻。 – 2011-01-07 21:14:34