SVG - Cambia colore di riempimento al clic del pulsante

Question

Ho fatto un semplice svg-test di prova.

Vorrei fare i pulsanti di commutazione in modo che quando clicco su btn-test1, il percorso1 sarà fill = "# 000" e gli altri "#FFF". Creerò una mappa con circa 40 percorsi diversi, ma ci sto provando prima (non so se è possibile)?

Ecco il codice HTML finora:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> 

<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0 
    C407.227,134.613,291.451,51.919,291.451,51.919z"/> 

<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309 
    c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/> 

<path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83 
    c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/> 
</svg> 

</div> 

<button class="btn" id="btn-test1">Test 1</button> 
<button class="btn" id="btn-test2">Test 2</button> 
<button class="btn" id="btn-test3">Test 3</button> 

EDIT: Questo javascript risolto

<script> 
$('.btn').click(function() { 
    $('#path1, #path2, #path3').css({ fill: "#ffffff" }); 
var currentId = $(this).attr('id'); 
$('#path' + currentId +'').css({ fill: "#000" }); 
}); 
</script> 

Answer 1

Stai cercando la proprietà fill.

Vedi questo violino: http://jsfiddle.net/P6t2B/

Ad esempio:

$('#btn-test1').on("click", function() { 
    $('#path1').css({ fill: "#ff0000" }); 
}); 

Answer 2

fare questo (solo un piccolo esempio):

$(function(){ 
    $("#btn-test1").on("click",function(){ 
     $("#path1").attr("fill","#0000"); 

    }); 
}); 

Questo riempirà il percorso1 wi th # 0000

Answer 3

<script type="text/javascript"> 
    $(document).ready(function() 
    { 

     //Redo XML 
     jQuery('img.svg').each(function(){ 
      var $img = jQuery(this); 
      var imgID = $img.attr('id'); 
      var imgClass = $img.attr('class'); 
      var imgURL = $img.attr('src'); 

      jQuery.get(imgURL, function(data) { 
       // Get the SVG tag, ignore the rest 
       var $svg = jQuery(data).find('svg'); 

       // Add replaced image's ID to the new SVG 
       if(typeof imgID !== 'undefined') { 
        $svg = $svg.attr('id', imgID); 
       } 
       // Add replaced image's classes to the new SVG 
       if(typeof imgClass !== 'undefined') { 
        $svg = $svg.attr('class', imgClass+' replaced-svg'); 
       } 

       // Remove any invalid XML tags as per http://validator.w3.org 
       $svg = $svg.removeAttr('xmlns:a'); 

       // Replace image with new SVG 
       $img.replaceWith($svg); 

      }, 'xml'); 

     }); 

    }); 

    function changeColor(color) 
    { 

     //obj Father 
     $("#imgSvg").css("fill", color); 
     //objs children 
     $('#imgSvg').children().css('fill', color); 
    } 
    </script> 




    <img id="imgSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" src="imgTest.svg"/> 

    <br /> 
    <br /> 

    <button onclick="changeColor('#C0C0C0')">Gray</button> 
    <button onclick="changeColor('#FFF')">White</button> 
    <button onclick="changeColor('#000')">Black</button>