Как использовать привязку для заполнения цвета для всей группы элементов в 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, путь2, путь3 заменить с именами ваших путей

---

единственный способ сделать изменения группы будет в CSS с селектором *, но вы можете использовать только доступные динамические классы псевдо, которые не включают в себя кликали

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