如何使用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對象？

回答

相關問題