jQueryを使用してRaphael.jsオブジェクトにCSSスタイルを適用するにはどうすればよいですか？

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

問題は、私はラファエルのオブジェクトにクラスを追加しようとすると、動作しない、またはそれが動作しているかということで、変更された背景色のような、そのクラスのCSS属性（などに実行しているように見えます）が適用されていません。だから、

私.highlightクラスの場合：

.highlight { background-color: #f00; } 

適用されていないか、または元のラファエルattrsにからfill:"ccc"に上書きされていないこと。私の推測では、jQueryの対象となるIDはオブジェクト自体ではなく、RaphaelオブジェクトのNODE上にあるため、これはおそらく問題の一部です。

Raphaelを扱うときにノードを完全に避けるためのアドバイスがたくさんありましたが、これはRaphaelオブジェクトを外側のターゲティング（この場合はjQuery経由）まで開くための唯一の方法だと思われます。

これらのオブジェクトのスタイル変更を達成するためにCSSを使用する必要はありませんが、外部からの変更を実現する必要があります（jQuery経由 - 外部ハイライト要求などへの応答）すべて内部的に（Raphael経由で、オブジェクトのクリックに対してのみ）。

アイデア？

ありがとうございます！

Answer 1

私はあなたのコードが何をしているのか正確にわからないが、あなたはラファエロのオブジェクトのうち、jQueryオブジェクトを取得したい場合は、この操作を行います。あなたは、クラスを追加するためにjQueryを使用することができ、そこから

var $jQueryObject = $(raphaelObject.node); 

を：

$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');