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

问题描述

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

Does anybody have any experience with the Raphael.js SVG library?

我使用Raphael.js创建一个SVG地图我无法打开Raphael创建的地图对象，通过jQuery和css的样式进行外部交互。

I'm using Raphael.js to create an SVG map (for use on smartphones) but I'm having trouble opening the map objects that Raphael creates up to outside interaction by jQuery and styling by 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属性（如更改的背景颜色等）未应用。

The issue I seem to be running into is that trying to add a class to the Raphael object doesn't work, or if it is working, the CSS attributes of that class (like changed background colors, etc) aren't being applied.

如果我的.highlight类是：

So if my .highlight class is:

.highlight { background-color: #f00; }

这未应用，或者未覆盖 ：ccc从原Raphael attrs。我的猜测是，因为jQuery目标的ID在Raphael对象NODE而不是对象本身，这可能是问题的一部分。

That is either not being applied, or isn't overwriting the fill:"ccc" from the original Raphael attrs. My guess is that because the ID being targeted by jQuery is on the Raphael object NODE rather than the object itself, that's probably part of the problem.

我见过很多的建议，以避免节点一起处理拉斐尔，但它似乎是我发现打开一个Raphael对象到外部定位（在这种情况下通过jQuery）的唯一方式。

I've seen lots of advice to avoid node altogether when dealing with Raphael, but it seems to be the only way I've found to open a Raphael object up to outside targeting (in this case via jQuery).

我不必使用CSS来实现这些对象的样式更改，但我必须能够在外部实现这种变化（通过jQuery - 响应外部高亮请求等） 。

I don't have to use CSS to achieve the style change on these objects, but I do have to be able to achieve that change externally (via jQuery - in response to external highlight requests, etc) rather than all internally (via Raphael and only in response to object clicks).

想法？

谢谢！

推荐答案

我不知道你的代码是做什么，想要从Raphael对象中获取一个jQuery对象，然后这样做：

I am not exactly sure what you code is doing, but if you want to get a jQuery object out of a Raphael object then do this:

var $jQueryObject = $(raphaelObject.node);

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

From there you can use jQuery to add a class:

$jQueryObject.addClass('highlight');

这篇关于如何使用jQuery应用CSS样式到Raphael.js对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！