如何使用捕捉爲SVG中的整個元素組填充顏色

Question

我想填充SVG圖像的整個元素組的顏色。我我的組合元素結合在一起，像這樣

<g id="calendar"> 
<path d="M265.8,631.3l-26.7,8c1.7,5.4,3.5,10.8,5.6,16l26,-9.9c-1.8,-4.6,-3.4,-9.3,-4.9,-14.1Z" class="g1_1"value="2013-10-15"></path> 
<path d="M528,769.2l8,26.7c5.5,-1.7,10.8,-3.6,16,-5.6l-10,-26c-4.6,1.8,-9.3,3.4,-14,4.9Z" class="g1_1"></path> 
<path d="M212.6,647.2l-39.7,11.9c2.2,7.1,4.6,14.1,7.3,21l38.7,-14.9c-2.3,-5.9,-4.4,-11.9,-6.3,-18Z" class="g1_1"value="2013-10-01"></path> 
<path d="M387.3,316.5L375.4,276.8c-7.1,2.2,-14.1,4.6,-21,7.3l14.9,38.7c5.9,-2.3,11.9,-4.4,18,-6.3Z" class="g1_1" value="2013-07-02"></path> 
</g> 

現在我想在我的網頁上的按鈕，當我點擊特定的事件，然後單擊該按鈕的標籤，元素的全團會充滿了由該事件決定的特定顏色。我已經完成了這樣的功能

$("#quickevent").on("click",function(){ 
    var date = $("#date").val(); 

    var username = "<?php echo $_SESSION['username']; ?>"; 
    if(swim){ 
    var color = $("#swimming").css("background-color"); 
    var detail = $("#swimming").text(); 
    } 
    if(dan){ 
    var color = $("#dancing").css("background-color"); 
    var detail = $("#dancing").text(); 
    } 
    if(eat){ 
    var color = $("#eating").css("background-color"); 
    var detail = $("#eating").text(); 
    } 
    if(read){ 
    var color = $("#reading").css("background-color"); 
    var detail = $("#reading").text(); 
    } 
    if(skate){ 
    var color = $("#skating").css("background-color"); 
    var detail = $("#skating").text(); 
    } 

      var svg_color = Snap("#svg"); 
      var svg_element = svg_color.selectAll("#innercalendar"); 
      svg_element.attr({fill: color}); 

    $.post("postdb.php",{"date" : date,"color" : color,"username" : username, "detail" : detail},function(data,status){}); 
    $("#date").val(""); 
}); 

但我不知道如何爲SVG中的整個元素組填充顏色。任何人都可以教我如何做到這一點？ （現在我已經嘗試新的方式，錯誤是消失了，但它不工作）

Answer 1

如果你想點擊一個東西和更改所有路徑的一種顏色做：

$('#nameofwhattoclick').on("click", function() { 
    $('#path1, #path2, #path3').css({ fill: "#ffffff" }); 
}); 

或點擊一兩件事，改變一兩件事要做：

$('#nameofwhattoclick1').on("click", function() { 
    $('#path1').css({ fill: "#000000" }); 
}); 
$('#nameofwhattoclick2').on("click", function() { 
    $('#path2').css({ fill: "#000000" }); 
}); 

填充：#FFFFFF與你的膚色， PATH1，PATH2，path3時，替換你的路的名字替換

---

僅做一組變化的方法是與*選擇CSS，但你可以只使用其中不包括點擊可用動態僞類

#calandar:hover * { 
    fill: #00FF00; 
}