jQuery選擇所有SVG路徑並應用動畫填充

我有一個工作區域的國家地圖，動畫填充點擊和懸停區域。每條路徑都單獨工作。jQuery選擇所有SVG路徑並應用動畫填充

我想添加一個Select All/Clear All選項，將點擊效果應用於所有路徑。我創建了一個新的div與

<div id="selectAll">Click to Select All</div>

，然後用一些jQuery的

$('#selectAll').click(function(){ 
    $("[id^=Co]").animate({ 
     fill: '#698B22' 
     }, 300); 
});

的選擇"[id^=Co]"可以得到所有的路徑，因爲所有的ID開始以「CO」。這個選擇器也適用於我每個區域的qtip。

我不知道我在做什麼錯在這裏。任何指導都會有很大的幫助。 tia

來源

2012-06-13 chris loughnane

'animate'功能不承認'fill'效果。你正在使用一些插件或什麼？如果你需要動畫的顏色，你需要jQuery的顏色插件：https：//github.com/jquery/jquery-color – Sarfraz

對不起，我應該提到：是的，我使用** raphael.js **和目前懸停作品與 'obj.hover（function（）{this.animate（{fill：'＃32CD32'}，300）;}，'等我試圖找到某種方式選擇所有的obj –

在您的選擇操作中，您必須以某種方式使用raphaël的動畫功能。不知道這是可能的。

但是，您可以創建稍後需要更改的路徑的raphaëlset，然後在點擊時更改set上的填充。

來源

2012-06-14 09:33:21

最終得到所有區域改變顏色： '$（'＃selectAll'）。click（function（）{（＃map path）。attr（{fill：'＃698B22'}）;' without動畫雖然，我會活... 一個與Raphael一起使用的路徑示例 'Mayo：{name：'Mayo'，value：'notSelected'，path：'m85.529,143.84497c-0.271,0.01599z '}，'等（截斷顯示）在點擊一條路徑時，** notSelected **的值改變爲** isSelected **並帶有'paths [arr [this.id]] .value =「isSelected」;'這樣我就可以控制if懸停應該改變顏色。 –

因此，當點擊div ** selectAll **'時，所有路徑都應該改變顏色，所有的值應該被設置爲** isSelected **。我還是** json **的新手，雖然我已經使用XML在Java中構建了一個完整的Messenger應用程序，但我並不熟悉jQuery並解析** json **。我嘗試使用for循環沒有運氣。我想也許我一直在盯着這個SVG/Raphael的任務太久:) –

請注意，如果你這樣做與這樣的jQuery它可能不會正確顯示在舊的IE版本（使用VML的）。基本上我在說的是：除非你確定只需要支持支持SVG的瀏覽器，否則混合使用jQuery是一個壞主意。如果你確定你可以要求SVG，那麼http://d3js.org更接近你想要的東西，因爲它並不隱藏像Raphaël那樣的svg元素，而且它與jQuery相似，因爲選擇器是一個核心概念。 –

添加jquery.color插件，那麼你的代碼之前添加：

jQuery.Color.hook("fill stroke");

然後你原來的動畫功能將工作

$('#selectAll').click(function(){ 
    $("[id^=Co]").animate({ 
     fill: '#698B22' 
     }, 300); 
});

來源

2013-10-27 06:59:11 BGundlach

jQuery選擇所有SVG路徑並應用動畫填充

回答

相關問題