Zakázání barvy

 
 
<svg id="swatches" width="60px" height="100px" style="" viewBox="-4 -4 60 100">    <rect style="fill:black"    x="0"  y="0" width="20" height="20"/>
     <rect style="fill:#fe9000" x="25" y="0" width="20" height="20"/>
     <rect style="fill:#ff0000" x="0"  y="25" width="20" height="20"/>
     <rect style="fill:#ffff00"    x="25" y="25" width="20" height="20"/>
     <rect style="fill:#0080ff" x="0"  y="50" width="20" height="20"/>
     <rect style="fill:#1cb21c" x="25" y="50" width="20" height="20"/>
     <rect style="fill:white" x="0"  y="75" width="20" height="20"/>
     <rect style="fill:#f70b79"    x="25" y="75" width="20" height="20"/>
     <rect id="selection" style="stroke:#0000ff; stroke-opacity: 1;fill:none" x="0" y="0" width="20" height="20"/>
  </svg> 
 
 
      

  <svg id="omalovanka" xmlns="http://www.w3.org/2000/svg" width="1000px" height="350px" viewBox="1 28 437 196.7" style="fill:#fff;stroke: #000;">
<style type="text/css">

    .st0{fill:grey;stroke:#08090A;stroke-width:0.5;stroke-miterlimit:10;}
    .st1{fill:#dedede;stroke:#08090A;stroke-width:0.5;stroke-miterlimit:10;} 
</style>
 


<path class="st1" d="M266.5,79.3c0,0.2,8.9,16.1,8.9,16.1s0.9,2.1-0.9,4.8c-1.8,2.7-9.5,3.2-10.8,3.4c-1.3,0.1-8.3,0.2-19.2,0.5
    s-12.7,1.5-16.9,4.1s-3.2,5.5-3.2,5.5l4.9,8.4c5.4,10,35.2,8.9,35.2,8.9c61.5,2.2,192.2-5.4,192.2-5.4l0.3,0.5V116
    c0,0-8.7-8.3-13.5-11.7c-4.6-3.2-60-32.1-189.7-34.4C262.9,71.9,266.5,79.1,266.5,79.3z"/>
<path class="st1" d="M207.9,131.8c0,0-6.2-10.3-12.7-19.2c-6.5-8.9-3.8-10.3-3.8-10.3c1.6-8.1,21.1-8.4,21.1-8.4s17.3,0.5,27.3-0.5
    s6-7.3,6-7.3c-3-8.9-13.5-8.7-13.5-8.7C102.3,79,44.1,101.2,44.1,101.2c-16.5,5.3-27.5,12.4-33.2,16.9V129
    c32.8,10.3,165.5,12.7,212.5,13.2C213.3,138.8,207.9,131.8,207.9,131.8z"/>
<path class="st0" d="M234,142.3c3.9,0,6.1,0,6.1,0v-0.1c42.6-0.4,183-2.6,216.9-13.3v-2.9l-0.3-0.5c0,0-130.8,7.6-192.2,5.4
    c0,0-29.8,1.1-35.2-8.9l-4.9-8.4c0,0-1.1-2.9,3.2-5.5s6-3.7,16.9-4.1s17.9-0.4,19.2-0.5c1.3-0.1,9-0.7,10.8-3.4
    c1.8-2.7,0.9-4.8,0.9-4.8s-8.9-15.9-8.9-16.1c0-0.2-3.5-7.4-12.6-9.4c-6.4-0.1-13-0.2-19.8-0.1C90,69.2,29.3,100.9,24.5,104.3
    c-4.9,3.4-13.5,11.7-13.5,11.7v2.1c5.7-4.4,16.7-11.6,33.2-16.9c0,0,58.2-22.2,188.1-23.8c0,0,10.6-0.3,13.5,8.7c0,0,4.1,6.2-6,7.3
    s-27.3,0.5-27.3,0.5s-19.5,0.3-21.1,8.4c0,0-2.7,1.4,3.8,10.3c6.5,8.9,12.7,19.2,12.7,19.2s5.4,7,15.5,10.4c0.8,0,1.5,0,2.3,0v0.7
    c-3.9,0-7.8,0.1-11.6,0.1c-9.1,2.1-12.6,9.2-12.6,9.4c0,0.2-8.9,16.1-8.9,16.1s-0.9,2.1,0.9,4.8c1.8,2.7,9.5,3.2,10.8,3.4
    c1.3,0.1,8.3,0.2,19.2,0.5s12.7,1.5,16.9,4.1c4.3,2.6,3.2,5.5,3.2,5.5l-4.9,8.4c-5.4,10-35.2,8.9-35.2,8.9
    c-61.5,2.2-192.2-5.4-192.2-5.4l-0.3,0.5v2.9c33.9,10.7,174.4,12.8,216.9,13.3v0.1c0,0,2.2,0,6.1,0c3.9,0,6.1,0,6.1,0v-0.1
    c1.4,0,2.8,0,4.4,0c10.1-3.4,15.5-10.4,15.5-10.4s6.2-10.3,12.7-19.2c6.5-8.9,3.8-10.3,3.8-10.3c-1.6-8.1-21.1-8.4-21.1-8.4
    s-17.3,0.5-27.3-0.5c-10-1.1-6-7.3-6-7.3c3-8.9,13.5-8.7,13.5-8.7c129.9,1.6,188.1,23.8,188.1,23.8c16.5,5.3,27.5,12.4,33.2,16.9
    v-2.1c0,0-8.7-8.3-13.5-11.7c-4.8-3.4-65.6-35-209.5-34.5c-2.8,0-5.5,0-8.2,0l0-0.7c0.7,0,1.4,0,2.1,0v0.1
    C227.9,142.3,230,142.3,234,142.3z"/>
</svg>

   
<script>
 
 var _currentFill = "fill:#000";
  var _pouziteBarvy = new Array();
  var _vypln = new Boolean(true);
  $("#octocat").click(function (event) {
      for (i = 0; i < _pouziteBarvy.length; i++){
          if(_pouziteBarvy[i] == _currentFill){
           _vypln = false;
           break;
         }
      }
      if(_vypln && event.target.nodeName == "path"){
         var i = _pouziteBarvy.indexOf($(event.target).attr('style'));
         if(i != -1) {
        _pouziteBarvy.splice(i, 1);
    }                 
         $(event.target).attr('style', _currentFill);
         _pouziteBarvy.push(_currentFill);
      }
      _vypln = true;             
  })
  var $swatches = $("#swatches");
  $swatches.click(function (event) { 
      $swatch = $(event.target);
      loc = [parseInt($swatch.attr('x'), 10), parseInt($swatch.attr('y'), 10)]
      $("#selection", $swatches).attr('x', loc[0]);
      $("#selection", $swatches).attr('y', loc[1]);
      if( event.target.nodeName != "svg"){
          _currentFill = $swatch.attr('style');
      }
  })