如何使用對齊方式為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" });
});

fill：#ffffff用您的顏色替換，path1，path2，path3用您的路徑名替換

---

進行組更改的唯一方法是使用*選擇器在CSS中，但是您只能使用不包含clicked的可用動態偽類。

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