如何使用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 - 响应外部高亮请求等）而不是所有内部（通过拉斐尔和只响应对象点击）。

想法？

谢谢！

来源

2011-01-07 Will Henderson

我爱拉斐尔图书馆。我对jQuery的整合能力印象深刻。 – 2011-01-07 21:14:34

我不完全相信你的代码是做什么的，但如果你想获得一个jQuery对象了拉斐尔对象的再做到这一点：

var $jQueryObject = $(raphaelObject.node);

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

$jQueryObject.addClass('highlight');

来源

2011-01-07 21:11:35

非常感谢（设置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; }

来源

2011-06-09 04:28:11

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

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

这会工作，而不是

$jQueryObject.addClass('highlight');

来源

2012-05-15 20:47:43 Jan

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

回答

相关问题