如何使用 snap 为 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;
}

如何使用 snap 为 SVG 中的整组元素填充颜色

How to use snap to fill color for the whole group of elements in SVG

javascript

css

jquery

svg

snap.svg